it-swarm-es.tech

Eliminar borde de IFrame

¿Cómo elimino el borde de una iframe incrustada en mi aplicación web? Un ejemplo de la 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 de la iframe fuera perfecta, suponiendo que los colores de fondo sean consistentes. El navegador de destino es solo para IE6 y desafortunadamente las soluciones para otros no ayudarán.

645
JoelB

Agregue el atributo frameBorder (observe el mayúscula ‘B’ ).

Así se vería así:

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

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

Debe establecer el atributo frameBorder con una mayúsculaB.

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

De acuerdo con iframe documentation, frameBorder está en desuso y se prefiere el uso del atributo CSS "border":

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

Además de agregar el atributo frameBorder, es posible que desee considerar configurar 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 > 
53
xenox

Para problemas específicos del navegador, también agregue frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" de 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>
21
Marnix Bras

Utilice el atributo ifebrame frameborder HTML

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

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

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

también puede eliminar el desplazamiento mediante 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 puedes usar el atributo seamless que es nuevo en HTML5. El atributo continuo de la etiqueta iframe solo se admite en Opera, Chrome y Safari. Cuando está presente, especifica que el iframe debe verse como parte del documento que lo contiene (sin bordes ni barras de desplazamiento). A partir de ahora, el atributo integrado de la etiqueta solo se admite en 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

9
Shubham Badal

Puedes usar style="border:0;" en tu código iframe. Esa es la forma recomendada para eliminar el borde en HTML5.

Echa un vistazo a mi html5 iframe generator tool para personalizar tu iframe sin editar código.

8
Shan Eapen Koshy

Se puede usar la propiedad de estilo Para HTML5 si desea eliminar el borde de su marco o cualquier otra 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>
7
Arpan Saini

Agregue el atributo frameBorder (Capital ‘B’).

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

Si el doctype de la página en la que está colocando el iframe es HTML5, entonces puede usar el atributo seamless así:

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

Mozilla docs en el atributo sin costura

6
David Tuite

También puedes hacerlo con JavaScript de esta manera. Encontrará los elementos de iframe y eliminará sus bordes en IE y otros navegadores (aunque solo puede establecer un estilo de "border: none;" en navegadores que no sean IE en lugar de usar JavaScript). Y funcionará incluso si se usa DESPUÉS de que el iframe se genere y se coloque en el documento (por ejemplo, los 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, una vez creado el iframe 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, la secuencia de comandos obtendrá errores de "acceso denegado" en la consola de errores IE. Si eso sucede, su única opción es configurarlo antes de que se genere, como han señalado otros, o usar el atributo frameBorder = "0" no estándar. (o simplemente deja que IE parezca feo - mi opción favorita actual;))

Me llevó MUCHAS horas de trabajo al 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.
         }
   }
6
FirstFraktal

En su hoja de estilos agregue

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

}

Esta es también una opción viable.

5
Tropilac

Intenté todo lo anterior y si eso no funciona para usted, intente con el CSS que se encuentra a continuación para resolver el problema. Lo que simplemente le dice a los navegadores que no agreguen ningún relleno o margen.

* {
  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>

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

4
IamGuest

Si está utilizando el iFrame para ajustar el ancho y el alto 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 en "0" de esta manera:

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

también establece border = "0px"

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

Tratar

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

Esto eliminará el borde de su marco.

2
Amaan Iqbal

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

use cualquiera de debajo 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

Utilizar esta

style="border:none;

Ejemplo:

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

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

1
Chetan Chauhan

Para eliminar el borde, puede usar la propiedad de borde CSS en none.

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