Eliminar borde de IFrame

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

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>

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>

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.

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 > 

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>

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

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.

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>

Agregue el atributo frameBorder (Capital 'B').

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

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

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

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

En su hoja de estilo agregue

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

}

Esta también es una opción viable.

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

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

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>

también establece border = "0px"

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

Tratar

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

Esto eliminará el borde de su marco.

Utilizar este

style="border:none;

Ejemplo:

<iframe src="your.html" style="border:none;"></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 agregar atributo en la etiqueta iframe frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

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>

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.

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.