javascript - scrolling - IE 8 iframe border

iframe url

Question

Hay un borde que se muestra en un iframe y no puedo deshacerme de él.

IE 6 y 7 funcionan según lo previsto con un poco de JavaScript:

function test(){
    var iframe = document.getElementById(''frame2'');
    iframe.contentWindow.document.body.style.backgroundColor = "#a31d1d";
    iframe.contentWindow.document.body.style.border = "#a31d1d";
    iframe.contentWindow.document.body.style.outlineColor = "#a31d1d";
}

Pero el borde permanece visible en IE 8.

Answer 1

¡Éxito!

Prueba esto. Encontrará todos los elementos del iframe y eliminará sus bordes en IE y otros navegadores (aunque puede simplemente establecer un estilo de "border: none;" en navegadores que no sean IE, en lugar de usar JavaScript). ¡Y funcionará incluso si se utiliza DESPUÉS de que el iframe se haya generado 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 es 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 IE solamente 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 notado, o usar el atributo frameBorder no estándar = "0". (o simplemente deja 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.
         }
   }

Answer 2

Añada los siguientes atributos a la etiqueta iframe:

marginheight="0" marginwidth="0" frameborder="0"

Answer 3

HTML de ejemplo para ir con la muestra JS sería útil =)

Intenta usar las Herramientas de desarrollo de IE8 (presiona F12 en la página con la que tienes problemas) para aislar qué estilos se están aplicando al iframe. También puedes jugar con los estilos allí, para reducir el tiempo de iteración.

Answer 4

Intenté muchas variaciones sobre esta idea y terminé usando algo en esta línea. Pensé que lo compartiría.

<script type="text/javascript">
   url = ''http://www.dollypower.com'';
   title = ''Dolly Power'';
   width = ''660'';
   height = ''430'';
    document.write(''<iframe src=''+url+'' title=''+title+'' width=''+width+'' height=''+height+'' frameborder=0></iframe>'');
 </script>

Luego usé etiquetas noscript para ingresar una alternativa para usuarios que no son JS, es decir:

<noscript><p><a href="http://www.dollypower.com" target="_blank">Please click here for Dolly Power</a></p></noscript>

Lo probé en IE8 y es genial para mí y también lo valida.

Espero que esto pueda ayudar a alguien por ahí!

Answer 5

Si quieres validar tu código, puedes hacer esto con javascript. Encontré la respuesta perfecta cuando tuve este problema hace unos meses here

var iframe = document.createElement("iframe");
 iframe.src = "banner_728x90.gif";
 iframe.width = "728";
 iframe.height = "90";
 iframe.frameBorder = "0";
 iframe.scrolling = "no";
 document.body.appendChild(iframe);

Si desea cargar otra página sin problemas en el iframe, puede hacerlo si copia y pega este código en el encabezado de su página. Lo encontré en un sitio con scripts gratuitos. El rendimiento es bueno en la mayoría de los casos

function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}
function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
    ifrm.style.visibility = ''hidden'';
    ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc
    ifrm.style.height = getDocHeight( doc ) + 10 + "px";
    ifrm.style.visibility = ''visible'';
}

A continuación, le da a su iframe una identificación y llama al script en la carga. Así es como.

var iframe = document.createElement("iframe");
 iframe.setAttribute(''id'', "ifrm1");
 iframe.setAttribute(''src'', ''http://www.hekcmviw.com/''); // change the URL
 iframe.setAttribute(''width'', ''100%'');
 iframe.setAttribute(''height'', ''10'');
 iframe.setAttribute(''frameBorder'', ''0'');
 iframe.setAttribute(''scrolling'', ''no'');
 iframe.setAttribute(''onload'' ,"setIframeHeight(this.id)");
 document.body.appendChild(iframe);

Answer 6

Tenga en cuenta que esto puede ser IE no respetando las configuraciones de borde en el CSS, mientras que la configuración tradicional del atributo BORDER=0 en el elemento de iframe puede funcionar. Vale la pena una prueba, al menos.

Editar: Parece que lo que soluciona el problema es establecer frameborder = ''0'' en el elemento iframe. Eso funcionó para mí, al menos.

Answer 7

Tuve el mismo problema con los iframes creados dinámicamente, y resultó que establecer propiedades de borde DESPUÉS de agregar el iframe al documento no tiene ningún efecto:

El siguiente código muestra un borde 3d:

var iframe = document.createElement("IFRAME");
iframe.src = "http:www..com";
//Iframe added BEFORE setting border properties.
document.body.appendChild(iframe);
iframe.frameBorder = "no";

Pero esto realmente lo elimina:

var iframe = document.createElement("IFRAME");
iframe.src = "http:www..com";
iframe.frameBorder = "no";
//Iframe added AFTER setting border properties.
document.body.appendChild(iframe);

Espero que esto ayude a resolver su problema.