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.


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>

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>

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.

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 > 

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>

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



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>

7

Agregue el atributo frameBorder (Capital 'B').

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

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

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;
 }


5

En su hoja de estilo agregue

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

}

Esta también es una opción viable.


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;">

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.


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>


3

también establece border = "0px"

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

3

Tratar

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

Esto eliminará el borde de su marco.


3

Utilizar este

style="border:none;

Ejemplo:

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

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>

1

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


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>

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.


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

Funciona con Firefox;)


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.
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.