Eliminar borde del IFrame

https://stackoverflow.com/questions/65034

09-06-2019
|

Pregunta

¿Cómo elimino el borde de un iframe ¿Incrustado 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 la transición del contenido de mi página al contenido de la iframe perfecta, suponiendo que los colores de fondo sean consistentes.El navegador de destino es sólo IE6 y, lamentablemente, las soluciones para otros no ayudarán.

Solución

Añade el frameBorder atributo (tenga en cuenta el 'B' mayúscula).

Entonces quedaría así:

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

Otros consejos

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

Tienes que configurar el atributo frameBorder con mayúscula B.

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

según marco flotante documentación, frameBorder está en desuso y se prefiere usar el atributo CSS "border":

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>

Tenga en cuenta que la propiedad de borde CSS no no lograr los resultados deseados en IE6, 7 u 8.

Además de agregar el atributo frameBorder, es posible que desees 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 >

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

Utilice el atributo HTML iframe frameborder

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

Nota:usar marcoBorden (cap B) para IE, de lo contrario no funcionará.Sin embargo, el atributo iframe frameborder no es compatible con HTML5.Entonces, usa CSS en su lugar.

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

También puedes eliminar el desplazamiento usando 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 utilizar el atributo transparente, que es nuevo en HTML5.El atributo transparente 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 transparente de la etiqueta sólo 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

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

Echa un vistazo a mi generador de marcos flotantes html5 herramienta para personalizar su iframe sin editar código.

Agregue el atributo frameBorder ('B' mayúscula).

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

Se puede utilizar la propiedad de estilo. Para HTML5, si desea eliminar el borde de su marco o cualquier cosa, puede usar la propiedad de estilo.como se indica a continuación

El código va aquí.

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

También puedes hacerlo con JavaScript de esta manera.Encontrará cualquier elemento iframe y eliminará sus bordes en IE y otros navegadores (aunque puedes establecer un estilo de "borde:none;" en navegadores que no sean IE en lugar de usar JavaScript).Y funcionará incluso si se usa DESPUÉS de que se genere el iframe y se coloque en el documento (p. ej.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 era de esperar, sino en el CONTENIDO del iframe, después de crear el iframe en la lista de materiales.ps¡¡¡ES DECIR!!!)

Nota:La parte de 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 otros han señalado, o usar el atributo frameBorder="0" no estándar.(o simplemente dejar que IE luzca feo: mi opción favorita actual;))

Me tomó MUCHAS horas de trabajo hasta el punto de desesperarme 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.
         }
   }

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

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

Documentos de Mozilla sobre el atributo transparente

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

* {
  padding:0px;
  margin:0px;
 }

En tu hoja de estilo agrega

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

}

Esta también es una opción viable.

Si está utilizando el iFrame para ajustarse al ancho y alto de toda la pantalla, lo cual supongo que no está basado en el tamaño de 300x300, también debe establecer los márgenes del cuerpo en "0" de esta manera:

<body style="margin:0px;">

<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 HTML 5.

también establezca border="0px "

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

Intentar

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

Esto eliminará el borde de su marco.

Utilizar esta

style="border:none;

Ejemplo:

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

Agregue el atributo frameBorder, use un estilo con un ancho de borde de 0 px o establezca el estilo del borde en ninguno.

Utilice cualquiera de los siguientes 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>

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>

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

iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Funciona con Firefox;)

<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.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow