Eliminar borde de IFrame

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

preguntado el 15 de septiembre de 08 a las 15:09

Puede hacerlo fácilmente utilizando un generador de iframe -

Simplemente cree una clase como ".nb {border: none;}" dentro del tag. Then add the "class="nb"" inside the tag. -

25 Respuestas

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

Entonces se vería así:

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

respondido 19 nov., 17:05

Me tomó un minuto descubrir que en JavaScript solo necesita element.frameBorder = 0. no .style y use 0, no '0' - anderspitman

Al validar el documento usando Servicio de validación de marcado frameBorder da como resultado un error, ya que no es compatible con HTML5: El atributo frameborder del elemento iframe está obsoleto. Utilice CSS en su lugar. En HTML5, establecería una propiedad CSS de border:0. ¿Hay alguna forma de hacerlo compatible con versiones anteriores sin causar errores de validación? - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

@ MatthewT.Baker Claro, vea mi respuesta a una de las otras muchas preguntas sobre este atributo: stackoverflow.com/a/20719286/1016716 Vaya, veo que olvidé la B mayúscula allí; Yo editaré. - Señor lister

@MartinAndersson caniuse.com/#feat=iframe-sin costuras afirma que no es compatible en absoluto. - Tim Büthe

La respuesta aquí es correcta, sin embargo, los comentarios que sugieren el uso del atributo seamless ya no son correctos. El atributo seamless se ha eliminado de la especificación: w3.org/TR/2014/REC-html5-20141028/… - Ron E.

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

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

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

Respondido 15 Abr '20, 18:04

NOTA: IE12 no mostrará los cambios de atributo de frameborder en F6 "depurador". En su lugar, agregue el atributo en el código html. - usuario932567

Tenga en cuenta que si bien la propiedad de JavaScript es frameBorder con una 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. - Señor lister

Según iframe documentación, frameBorder está obsoleto 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 CSS sí no lograr los resultados deseados en IE6, 7 u 8.

Respondido el 13 de junio de 18 a las 12:06

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

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

Respondido 21 Feb 12, 09:02

¿Cuál es su equivalente en HTML5? - daniel springer

style = "desbordamiento: oculto" - user7892745

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>

Respondido el 18 de diciembre de 15 a las 15:12

Usar el atributo frameborder de iframe HTML

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

Nota: use marcoBorden (tapa 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 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 un atributo integrado que es nuevo en HTML5. El atributo transparente de la etiqueta iframe solo es compatible con 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 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

Respondido 10 Jul 14, 08:07

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

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

Respondido 23 Oct 15, 04:10

Se puede utilizar la propiedad de estilo Para HTML5, si desea eliminar el límite 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>

Respondido 11 Feb 17, 11:02

Agregue el atributo frameBorder (Capital 'B').

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

respondido 16 mar '16, 06:03

También puede hacerlo con JavaScript de esta manera. Encontrará cualquier elemento iframe y eliminará sus bordes en IE y otros navegadores (aunque 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 se genere el iframe y se coloque 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 era de esperar, sino en el CONTENIDO del iframe, después de que se crea el iframe en la lista de materiales. ($ @ & * # @ !!! IE !!!)

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 han señalado otros, o utilizar el atributo frameBorder = "0" no estándar. (o simplemente deje que IE se vea feo - mi opción favorita actual;))

Me tomó 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.
         }
   }

Respondido el 24 de enero de 12 a las 01:01

Probé todo lo anterior y si eso no funciona para usted, pruebe el CSS a continuación 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;
 }

Respondido el 12 de junio de 14 a las 20:06

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

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

Documentos de Mozilla sobre el atributo seamless

Respondido 03 Jul 13, 16:07

costuras como una gran idea, pero lamentablemente no está bien respaldada. caniuse.com/#search=sin costuras - código_monk

No es compatible en absoluto. - skobaljic

En su hoja de estilo agregue

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

}

Esta también es una opción viable.

Respondido 30 Abr '15, 13:04

frameBorder no funcionó para mí, pero esto sí. Gracias. - Dos años

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

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

Respondido el 09 de enero de 18 a las 10:01

Si está utilizando el iFrame para ajustar el ancho y el alto de toda la pantalla, 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;">

Respondido 20 Jul 16, 18:07

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

Respondido el 03 de Septiembre de 16 a las 14:09

también establece border = "0px"

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

Respondido el 05 de enero de 17 a las 12:01

Trata

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

Esto eliminará el borde de su marco.

Respondido 01 Jul 17, 09:07

Use

style="border:none;

Ejemplo:

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

Respondido el 17 de Septiembre de 17 a las 09:09

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>

Respondido 22 Jul 17, 10:07

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

Respondido 18 Feb 18, 21:02

Antes de responder una pregunta, lea siempre las respuestas existentes. Esta respuesta ya se ha proporcionado. En lugar de repetir la respuesta, vote a favor de la respuesta existente. Se pueden encontrar algunas pautas para escribir buenas respuestas aquí. - diferenciar

1.Via borde de 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 varios I Frame podemos dar clase y poner css en interna o 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>

Respondido 11 Feb 20, 10:02

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

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

respondido 20 mar '20, 10:03

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

Funciona con Firefox;)

Respondido el 15 de enero de 14 a las 17:01

tal vez una pregunta diferente? - usuario7892745

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

Respondido el 07 de Septiembre de 18 a las 20:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.