Remover borda do IFrame

707

Como remover a borda de um iframe incorporado no meu aplicativo da web? Um exemplo do 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 do iframe fosse perfeita, assumindo que as cores do plano de fundo sejam consistentes. O navegador de destino é apenas o IE6 e, infelizmente, soluções para outros não ajudarão.

JoelB
fonte
Você pode fazer isso facilmente usando um gerador de iframe
Shan Eapen Koshy
2
Apenas crie uma classe como ".nb {border: none;}" dentro da tag <style>. Em seguida, adicione a "class =" nb "" dentro da tag <iframe>.
Jim Jim

Respostas:

1126

Adicione o frameBorderatributo (observe o capital 'B' ).

Então seria assim:

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
David Basarab
fonte
3
Levei um minuto para descobrir em JavaScript, você só precisa de element.frameBorder = 0. no .style e use 0, não '0'
anderspitman
15
Ao validar o documento usando o Serviço de Validação de Marcação, ocorreframeBorder um erro, pois não é compatível com HTML5: O atributo frameborder no elemento iframe está obsoleto. Use CSS em seu lugar. No HTML5, eu definiria uma propriedade CSS de border:0. Existe uma maneira de torná-lo compatível com versões anteriores sem causar erros de validação?
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
1
@ MatthewT.Baker Claro, veja minha resposta em uma das muitas outras perguntas sobre esse atributo: stackoverflow.com/a/20719286/1016716 Opa, vejo que esqueci a capital B lá; Eu vou editar.
Sr. Lister
15
@MartinAndersson caniuse.com/#feat=iframe-seamless afirma que não é suportado.
Tim Büthe
2
A resposta aqui está correta, no entanto, os comentários que sugerem o uso do atributo contínuo não estão mais corretos. O atributo sem costura foi removido da especificação: w3.org/TR/2014/REC-html5-20141028/…
Ron E
145

Depois de enlouquecer tentando remover a borda no IE7, descobri que o atributo frameBorder faz distinção entre maiúsculas e minúsculas.

Você precisa definir o atributo frameBorder com B maiúsculo .

<iframe frameBorder="0"></iframe>
Adam
fonte
13
Isso é completamente ridículo! Boa captura embora. SO me salvou muitas horas de apuros novamente :)
Alex
seria um salva-vidas se fosse a resposta correta, porque menciona a capital B .
KARASZI István 30/03
1
NOTA: as alterações no atributo frameborder no "depurador" F12 não serão mostradas pelo IE6. Em vez disso, adicione atributo no código html.
Observe que, embora a propriedade JavaScript esteja frameBordercom um B maiúsculo, o atributo HTML realmente sempre faz distinção entre maiúsculas e minúsculas. E em XHTML, tudo deve estar em minúsculas frameborder.
Mr Lister
83

De acordo com a documentação do iframe , o frameBorder está obsoleto e o uso do atributo CSS "border" é o preferido:

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • Nota A propriedade de borda CSS não alcança os resultados desejados no IE6, 7 ou 8.
Roberto Chiaretti
fonte
54

Além de adicionar o atributo frameBorder, convém definir o atributo de rolagem como "não" para impedir a exibição de barras de rolagem.

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe > 
xenox
fonte
1
Qual é o equivalente em HTML5?
Daniel Springer
3
style = "estouro: oculto"
21

Para problemas específicos do navegador, adicione também de frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"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>
Marnix Bras
fonte
9

Use o atributo iframe frameborder HTML

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

Nota: use a ordem do quadro B (tampa B) para o IE, caso contrário não funcionará. Mas, o atributo iframe frameborder não é suportado no HTML5. Portanto, use CSS.

<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 contínuo que é novo no HTML5. O atributo contínuo da tag iframe é suportado apenas no Opera, Chrome e Safari. Quando presente, especifica que o iframe deve parecer que faz parte do documento que contém (sem bordas ou barras de rolagem). A partir de agora, o atributo contínuo da tag é suportado apenas no Opera, Chrome e Safari. Mas, em um 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

Shubham Badal
fonte
9

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

Confira minha ferramenta de gerador de iframe html5 para personalizar seu iframe sem editar o código.

Shan Eapen Koshy
fonte
9

A propriedade Style pode ser usada No HTML5, se você desejar remover o codificador do seu quadro ou qualquer outra coisa, use a propriedade style. como indicado abaixo

Código vai aqui

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

Adicione o atributo frameBorder (Capital 'B').

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

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

Isso parece funcionar porque o IE cria a borda, não no elemento iframe como seria de esperar, mas no CONTEÚDO do iframe - depois que o iframe é criado na BOM. ($ @ & * # @ !!! IE !!!)

Nota: A parte do 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 do IE. Se isso acontecer, sua única opção é configurá-lo antes de ser gerado, como outros observaram, ou usar o atributo frameBorder = "0" não padrão. (ou apenas deixe o IE parecer indecente - minha opção favorita atual;))

Levei MUITAS horas de trabalho a ponto de desesperar para descobrir isso ...

Aproveitar. :)

// =========================================================================
// 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.
         }
   }
J118
fonte
6

Eu tentei todas as opções acima e, se isso não funcionar, tente o CSS abaixo: resolvi o problema para mim. O que apenas diz aos navegadores para não adicionar nenhum preenchimento ou margem.

* {
  padding:0px;
  margin:0px;
 }
th0ward
fonte
5

Se o doctype da página em que você está colocando o iframe for HTML5, você poderá usar o seamlessatributo da seguinte maneira:

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

Documentos da Mozilla sobre o atributo contínuo

David Tuite
fonte
4
costuras como uma ótima idéia, mas infelizmente não é bem suportada. caniuse.com/#search=seamless
code_monk
4
Não é suportado.
precisa saber é o seguinte
5

Na sua folha de estilo, adicione

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

}

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

Tropilac
fonte
frameBorder não funcionou para mim, mas isso funcionou. Obrigado.
Dois
4

Se você estiver usando o iFrame para ajustar a largura e a altura da tela inteira, suponho que você não seja baseado no tamanho de 300 x 300, também deverá definir as margens do corpo como "0" desta forma:

<body style="margin:0px;">
Michael Herr
fonte
4
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

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

IamGuest
fonte
4

Adicione o atributo frameBorder ou use o estilo com largura da borda 0px; ou defina o estilo da borda igual a nenhum.

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>

Divya Chugh
fonte
3

defina também border = "0px"

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

Tentar

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

Isso removerá a borda do seu quadro.

Amaan Iqbal
fonte
3

Usa isto

style="border:none;

Exemplo:

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

Para remover a borda, você pode usar a propriedade CSS border para none.

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

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

Chetan Chauhan
fonte
Antes de responder a uma pergunta, sempre leia as respostas existentes. Esta resposta já foi fornecida. Em vez de repetir a resposta, vote na resposta existente. Algumas diretrizes para escrever boas respostas podem ser encontradas aqui .
dferenc
0

1.Via Inline Style set border: 0

 <iframe src="display_file.html" style="height: 400px; width:
   100%;border: 0;">HTML iFrame is not compatible with your browser
   </iframe>

2. Através do atributo Tag Atributo frameBorder 0

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

3. Se tivermos vários quadros I, podemos dar classe e colocar css interno ou externamente.

HTML:

<iframe src="display_file.html" class="no_border_iframe">
    HTML iFrame is not compatible with your browser 
</iframe>

CSS:

<style>
.no_border_iframe{
border: 0; /* or border:none; */
}
</style>
Samir Lakhani
fonte
0

Eu tive um problema com a borda branca inferior e não consegui corrigi-lo com as regras de borda, margem e preenchimento ... Portanto, adicione display:block;porque o iframe é um elemento embutido.

Isso leva em consideração o espaço em branco no seu HTML.

mENE
fonte
-1
iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Funciona com o Firefox;)

mestre em desastres
fonte
pergunta diferente, talvez?
-1
<iframe src="URL" frameborder="0" width="100%" height="200">
<p>Your browser does not support iframes.</p>
</iframe>

<iframe frameborder="1|0">

(OR)

<iframe src="URL" width="100%" height="300" style="border: none">Your browser 
does not support iframes.</iframe>

The <iframe> frameborder attribute is not supported in HTML5. Use CSS 
instead.
Md Shahriar
fonte