Eliminar borde de IFrame

707

¿Cómo eliminaría el borde de un iframe incrustado en mi aplicación web? Un ejemplo del iframe es:

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

Me gustaría que la transición del contenido de mi página al contenido del iframe sea transparente, suponiendo que los colores de fondo sean consistentes. El navegador de destino es solo IE6 y desafortunadamente las soluciones para otros no ayudarán.

JoelB
fuente
Puede hacerlo fácilmente utilizando un generador de iframe
Shan Eapen Koshy
2
Simplemente cree una clase como ".nb {border: none;}" dentro de la etiqueta <style>. Luego agregue el "class =" nb "" dentro de la etiqueta <iframe>.
Jim

Respuestas:

1126

Agregue el frameBorderatributo (tenga en cuenta la 'B' mayúscula ).

Entonces se vería así:

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
David Basarab
fuente
3
Me tomó un minuto descubrir en JavaScript que solo necesita element.frameBorder = 0. no .style y use 0, no '0'
anderspitman
15
Al validar el documento con el Servicio de validación de marcado, se frameBorder produce un error, ya que no es compatible con HTML5: el atributo frameborder en el elemento iframe es obsoleto. Use CSS en su lugar. En HTML5, establecería una propiedad CSS de border:0. ¿Hay alguna manera de hacerlo compatible con versiones anteriores sin causar errores de validación?
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
1
@ MatthewT.Baker Claro, vea mi respuesta en una de las muchas preguntas sobre este atributo: stackoverflow.com/a/20719286/1016716 Vaya, veo que olvidé la B mayúscula allí; Lo editaré
Sr. Lister el
15
@MartinAndersson caniuse.com/#feat=iframe-seamless afirma que no es compatible en absoluto.
Tim Büthe
2
La respuesta aquí es correcta, sin embargo, los comentarios que sugieren el uso del atributo integrado ya no son correctos. El atributo continuo
Ron E
145

Después de volverme loco tratando de eliminar el borde en IE7, descubrí que el atributo frameBorder distingue entre mayúsculas y minúsculas.

Debe establecer el atributo frameBorder con una B mayúscula .

<iframe frameBorder="0"></iframe>
Adam
fuente
13
¡Esto es completamente ridículo! Buena captura sin embargo. SO me ahorró muchas horas de problemas nuevamente :)
Alex
sería un salvavidas si eran la respuesta correcta, porque menciona la capital B .
KARASZI István
1
NOTA: IE6 no mostrará los cambios del atributo frameborder en el "depurador" F12. En cambio, agregue el atributo en el código html.
Tenga en cuenta que, si bien la propiedad de JavaScript está frameBorderen B mayúscula, el atributo HTML siempre ha sido insensible a mayúsculas y minúsculas. Y en XHTML debería estar todo en minúsculas frameborder.
Sr. Lister
83

Según la documentación del iframe , frameBorder está en desuso y se prefiere usar el atributo CSS "borde":

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • Nota: la propiedad de borde CSS no logra los resultados deseados en IE6, 7 u 8.
Roberto Chiaretti
fuente
54

Además de agregar el atributo frameBorder, es posible que desee considerar establecer el atributo de desplazamiento en "no" para evitar que aparezcan barras de desplazamiento.

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe > 
xenox
fuente
1
¿Cuál es su equivalente en HTML5?
Daniel Springer
3
style = "overflow: hidden"
21

Para problemas específicos del navegador también agregue de frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"acuerdo con 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
fuente
9

Utilice el atributo de marco de marco de iframe HTML

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

Nota: use el orden de marco B (cap B) para IE, de lo contrario no funcionará. Pero, el atributo iframe frameborder no es compatible con HTML5. Entonces, use CSS en su lugar.

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

También puede eliminar el desplazamiento utilizando el atributo de desplazamiento http://www.w3schools.com/tags/att_iframe_scrolling.asp

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

También puede usar un atributo sin interrupciones que es nuevo en HTML5. El atributo continuo de la etiqueta iframe solo es compatible con Opera, Chrome y Safari. Cuando está presente, especifica que el iframe debería verse como parte del documento que lo contiene (sin bordes ni barras de desplazamiento). A partir de ahora, el atributo perfecto de la etiqueta solo es compatible con Opera, Chrome y Safari. Pero en un futuro próximo será la solución estándar y será compatible con todos los navegadores. http://www.w3schools.com/tags/att_iframe_seamless.asp

Shubham Badal
fuente
9

Puede usar style="border:0;"en su código de iframe. Esa es la forma recomendada de eliminar el borde en HTML5.

Consulte mi herramienta de generador de iframe html5 para personalizar su iframe sin editar el código.

Shan Eapen Koshy
fuente
9

La propiedad de estilo se puede usar para HTML5 si desea eliminar el boder de su marco o cualquier cosa que pueda usar la propiedad de estilo. como se indica a continuación

El código va aquí

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

Agregue el atributo frameBorder (Capital 'B').

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

También puedes hacerlo con JavaScript de esta manera. Encontrará todos los elementos de iframe y eliminará sus bordes en IE y otros navegadores (aunque puede establecer un estilo de "borde: ninguno;" en navegadores que no sean IE en lugar de usar JavaScript). ¡Y funcionará incluso si se usa DESPUÉS de que el iframe se genera y está en su lugar en el documento (por ejemplo, iframes que se agregan en HTML simple y no en JavaScript)!

Esto parece funcionar porque IE crea el borde, no en el elemento iframe como cabría esperar, sino en el CONTENIDO del iframe, después de que el iframe se crea en la lista de materiales. ($ @ & * # @ !!! IE !!!)

Nota: La parte IE solo funcionará (por supuesto) si la ventana principal y el iframe son del mismo origen (mismo dominio, puerto, protocolo, etc.). De lo contrario, el script obtendrá errores de "acceso denegado" en la consola de errores de IE. Si eso sucede, su única opción es configurarlo antes de que se genere, como lo han señalado otros, o usar el atributo frameBorder = "0" no estándar. (o simplemente dejar que IE se vea fugly - mi opción favorita actual;))

Me llevó MUCHAS horas de trabajo hasta el punto de la desesperación para resolver esto ...

Disfrutar. :)

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

Intenté todo lo anterior y si eso no funciona, intente con el siguiente CSS que resolvió el problema por mí. Lo que simplemente le dice a los navegadores que no agreguen ningún relleno o margen.

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

Si el tipo de documento de la página en la que está colocando el iframe es HTML5, puede usar el seamlessatributo de la siguiente manera:

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

Documentos de Mozilla sobre el atributo integrado

David Tuite
fuente
44
costuras como una gran idea, pero por desgracia no está bien soportado. caniuse.com/#search=seamless
code_monk
44
No es compatible en absoluto.
skobaljic
5

En su hoja de estilo agregue

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

}

Esta también es una opción viable.

Tropilac
fuente
frameBorder no funcionó para mí, pero esto sí. Gracias.
Dois
4

Si está utilizando el iFrame para ajustar el ancho y la altura de toda la pantalla, lo que supongo que no se basa en el tamaño de 300x300, también debe establecer los márgenes del cuerpo a "0" de esta manera:

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

Este código debería funcionar en HTML 4 y 5.

IamGuest
fuente
4

Agregue el atributo frameBorder o use un estilo con un ancho de borde de 0px ;, o establezca un estilo de borde igual a ninguno.

use cualquiera de abajo 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
fuente
3

también establece border = "0px"

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

Tratar

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

Esto eliminará el borde de su marco.

Amaan Iqbal
fuente
3

Utilizar este

style="border:none;

Ejemplo:

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

Para eliminar el borde, puede usar la propiedad de borde CSS para ninguno.

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

Es simple simplemente agregar atributo en la etiqueta iframe frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

Chetan Chauhan
fuente
Antes de responder una pregunta, siempre lea las respuestas existentes. Esta respuesta ya ha sido proporcionada. En lugar de repetir la respuesta, vote la respuesta existente. Algunas pautas para escribir buenas respuestas se pueden encontrar aquí .
conferencia
0

1.Via borde del conjunto de estilo en línea: 0

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

2. A través del atributo de etiqueta frameBorder Set 0

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

3. si tenemos múltiples I Frame podemos dar clase y poner css en forma interna o externa.

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
fuente
0

Tuve un problema con el borde blanco inferior y no pude solucionarlo con las reglas de borde, margen y relleno ... Entonces agregue display:block;porque el iframe es un elemento en línea.

Esto toma en cuenta los espacios en blanco en su HTML.

MENÚ
fuente
-1
iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Funciona con Firefox;)

maestro del desastre
fuente
pregunta diferente tal vez?
-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
fuente