it-swarm-pt.tech

Remover borda do IFrame

Como faço para remover a borda de uma iframe incorporada no meu aplicativo da web? Um exemplo da iframe é:

<iframe src="myURL" width="300" height="300">Browser not compatible.</iframe>

Eu gostaria que a transição do conteúdo da minha página para o conteúdo da iframe fosse perfeita, assumindo que as cores de fundo são consistentes. O navegador de destino é apenas IE6 e, infelizmente, as soluções para os outros não ajudarão.

645
JoelB

Adicione o atributo frameBorder (observe o capital "B" ).

Então seria parecido com:

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
1051
David Basarab

Depois de ficar louco tentando remover a borda no IE7, descobri que o atributo frameBorder é sensível a maiúsculas e minúsculas.

Você tem que definir o atributo frameBorder com um capitalB.

<iframe frameBorder="0" ></iframe>
142
Adam

Conforme a documentação iframe , o frameBorder é obsoleto e o uso do atributo CSS "border" é preferido:

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • Observação Propriedade de borda CSS faz não atingir os resultados desejados no IE6, 7 ou 8.
64
Roberto Chiaretti

Além de adicionar o atributo frameBorder, convém considerar a configuração do atributo de rolagem como "não" para evitar que as barras de rolagem apareçam.

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe > 
53
xenox

Para problemas específicos do navegador, adicione frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" de acordo com o Dreamweaver:

<iframe src="test.html" name="banner" width="300" marginwidth="0" height="300" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">Browser not compatible. </iframe>
21
Marnix Bras

Use o atributo frameborder de iframe HTML

http://www.w3schools.com/tags/att_iframe_frameborder.asp

Nota: use frameBorder (cap B) para o IE, caso contrário não funcionará. Porém, o atributo iframe frameborder não é suportado em HTML5. Então, use CSS em seu lugar.

<iframe src="http://example.org" width="200" height="200" style="border:0">

você também pode remover a rolagem usando o atributo de rolagem http://www.w3schools.com/tags/att_iframe_scrolling.asp

<iframe src="http://example.org" width="200" height="200" scrolling="no" style="border:0">

Além disso, você pode usar o atributo seamless, que é novo em HTML5. O atributo contínuo da tag iframe é suportado apenas no Opera, no Chrome e no Safari. Quando presente, especifica que o iframe deve parecer com uma parte do documento que contém (sem bordas ou barras de rolagem). A partir de agora, o atributo seamless da tag só é suportado no Opera, no Chrome e no Safari. Mas no futuro próximo será a solução padrão e será compatível com todos os navegadores. http://www.w3schools.com/tags/att_iframe_seamless.asp

9
Shubham Badal

Você pode usar style="border:0;" no seu código de iframe. Essa é a maneira recomendada de remover a borda em HTML5.

Verifique meu gerador de iframe html5 tool para personalizar seu iframe sem editar o código.

8
Shan Eapen Koshy

Propriedade de estilo pode ser usada Para HTML5, se você quiser remover a borda do seu quadro ou qualquer coisa, você pode usar a propriedade de estilo. como dado abaixo

Código vai aqui

<iframe src="demo.htm" style="border:none;"></iframe>
7
Arpan Saini

Adicione o atributo frameBorder (Capital "B").

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>
7
Harden Rahul

Se o tipo de documento da página em que você está colocando o iframe é HTML5, então você pode usar o atributo seamless da seguinte forma:

<iframe src="..." seamless="seamless"></iframe>

Mozilla docs no atributo seamless

6
David Tuite

Você também pode fazer isso com JavaScript dessa maneira. Ele encontrará todos os elementos iframe e removerá suas bordas no IE e em outros navegadores (embora você possa apenas definir um estilo de "border: none;" em navegadores não IE em vez de usar JavaScript). E funcionará mesmo se usado APÓS o iframe é gerado e no lugar no documento (por exemplo, iframes que são adicionados em HTML simples e não em JavaScript)!

Isso parece funcionar porque IE cria a borda, não no elemento iframe, como esperado, mas no conteúdo do iframe - depois que o iframe é criado na lista de materiais. ($ @ & * # @ !!! IE !!!)

Nota: A parte IE só funcionará (é claro) se a janela pai e o iframe forem da mesma origem (mesmo domínio, porta, protocolo etc.). Caso contrário, o script receberá erros de "acesso negado" no console de erros IE. Se isso acontecer, sua única opção é configurá-lo antes de ser gerado, como outros notaram, ou usar o atributo não padronizado frameBorder = "0". (ou apenas deixe IE parecer fugaz - minha opção favorita atual;))

Levou-me muitas horas de trabalho a ponto de desespero para descobrir isso ...

Apreciar. :)

// =========================================================================
// Remove borders on iFrames

if (window.document.getElementsByTagName("iframe"))
   {
      var iFrameElements = window.document.getElementsByTagName("iframe");
      for (var i = 0; i < iFrameElements.length; i++)
         {
            iFrameElements[i].frameBorder="0";   //  For other browsers.
            iFrameElements[i].setAttribute("frameBorder", "0");   //  For other browsers (just a backup for the above).
            iFrameElements[i].contentWindow.document.body.style.border="none";   //  For IE.
         }
   }
6
FirstFraktal

Na sua folha de estilo, adicione

{
  padding:0px;
  margin:0px;
  border: 0px

}

Esta também é uma opção viável.

5
Tropilac

Eu tentei todos os itens acima e se isso não funcionar para você tente o CSS abaixo resolveu o problema para mim. Que apenas diz aos navegadores para não adicionar nenhum preenchimento ou margem.

* {
  padding:0px;
  margin:0px;
 }
5
th0ward
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

Esse código deve funcionar no HTML 4 e 5.

4
IamGuest

Se você estiver usando o iFrame para ajustar a largura e a altura da tela inteira, o que estou assumindo que você não está baseado no tamanho 300x300, você também deve definir as margens do corpo como "0" assim:

<body style="margin:0px;">
4
Michael Herr

também defina border = "0px"

 <iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>
3
Ajesh Kolakkadan

Experimentar

<iframe src="url" style="border:none;"></iframe>

Isso removerá a borda do seu quadro.

2
Amaan Iqbal

Adicione o atributo frameBorder ou use o estilo com 0px; ou defina o estilo de borda igual a none.

use qualquer um abaixo de 3:

<iframe src="myURL" width="300" height="300" style="border-width:0px;">Browser not compatible.</iframe>

<iframe src="myURL" width="300" height="300" frameborder="0">Browser not compatible.</iframe>

<iframe src="myURL" width="300" height="300" style="border:none;">Browser not compatible.</iframe>
2
Divya Chugh

Usa isto

style="border:none;

Exemplo:

<iframe src="your.html" style="border:none;"></iframe>
2
user6375752

É simples adicionar atributo na tag iframe frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

1
Chetan Chauhan

Para remover a borda, você pode usar a propriedade de borda CSS como nenhuma.

<iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe>
1
user8349297