¿Cómo aplicar CSS a un iframe?

Tengo una página sencilla que tiene algunas secciones de iframe (para mostrar enlaces RSS). ¿Cómo puedo aplicar el mismo formato CSS de la página principal a la página que se muestra en el iframe?

FelipeAls
Pregunta editada 1º septiembre 2014 в 1:12
Programación
iframe html css
20º octubre 2008 в 8:27
21 vistas

Si el contenido del iframe no está completamente bajo tu control o quieres acceder al contenido desde diferentes páginas con diferentes estilos puedes intentar manipularlo usando JavaScript.

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

Ten en cuenta que, dependiendo del navegador que utilices, esto podría funcionar sólo en páginas servidas desde el mismo dominio.

Comentarios (2)

Un iframe es manejado universalmente como una página HTML diferente por la mayoría de los navegadores. Si quieres aplicar la misma hoja de estilos al contenido del iframe, sólo tienes que hacer referencia a ella desde las páginas utilizadas en él.

Peter Mortensen
Respuesta editada 4º junio 2011 в 8:32
Comentarios (1)

Si controlas la página en el iframe, como dijo hangy, el enfoque más fácil es crear un archivo CSS compartido con estilos comunes, y luego simplemente enlazarlo desde tus páginas html.

De lo contrario, es poco probable que puedas cambiar dinámicamente el estilo de una página desde una página externa en tu iframe. Esto se debe a que los navegadores han reforzado la seguridad en el cross frame dom scripting debido al posible mal uso para el spoofing y otros hacks.

Este tutorial puede proporcionarle más información sobre el scripting de iframes en general. Sobre el cross frame scripting explica las restricciones de seguridad desde la perspectiva de IE.

Comentarios (0)