html scrolling ¿Cómo aplicar CSS a iframe?




insertar iframe css (21)

Mi versión compacta :

<script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

Sin embargo, a veces el iframe no está listo en la ventana cargada, por lo que es necesario utilizar un temporizador .

Código listo para usar (con temporizador):

<script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            clearInterval(frameListener); // stop the listener
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

... y enlace jQuery:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

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


Cuando dices "doc.open ()" significa que puedes escribir cualquier etiqueta HTML dentro del iframe, por lo que deberías escribir todas las etiquetas básicas para la página HTML y si quieres tener un enlace CSS en tu encabezado del iframe, simplemente escribe un Iframe con enlace CSS en el mismo. Te doy un ejemplo:

doc.open();

doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

En caso de que tenga acceso a la página de iframe y quiera que se aplique un CSS diferente solo cuando lo cargue a través de iframe en su página, aquí encontré una solución para este tipo de cosas

Esto funciona incluso si iframe está cargando un dominio diferente

consultar sobre postMessage()

El plan es enviar el css a iframe como un mensaje como

iframenode.postMessage('h2{color:red;}','*');

* es enviar este mensaje independientemente del dominio en iframe

y reciba el mensaje en iframe y agregue el mensaje recibido (CSS) al encabezado del documento.

código para agregar en la página iframe

window.addEventListener('message',function(e){

    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');

});

Podemos insertar etiqueta de estilo en iframe. Publicado también aquí ...

<style type="text/css" id="cssID">
.className
{
    background-color: red;
}
</style>

<iframe id="iFrameID"></iframe>

<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>

Encontré otra solución para poner el estilo en el html principal como este

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

y luego en iframe hacer esto (ver el js onload)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

y en js

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

Puede que no sea la mejor solución, y ciertamente se puede mejorar, pero es otra opción si desea mantener una etiqueta de "estilo" en la ventana principal


Si desea reutilizar CSS y JavaScript desde la página principal, tal vez debería considerar reemplazar <IFRAME> con un contenido cargado de Ajax. Esto es más amigable para SEO ahora cuando los robots de búsqueda pueden ejecutar JavaScript.

Este es un ejemplo de jQuery que incluye otra página html en su documento. Esto es mucho más amigable para SEO que iframe . Para asegurarse de que los bots no están indexando la página incluida, solo agréguela para no permitir en robots.txt

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript"></script>
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

También puede incluir jQuery directamente desde Google: http://code.google.com/apis/ajaxlibs/documentation/ - esto significa inclusión automática opcional de versiones más recientes y un aumento significativo de la velocidad. Además, significa que debe confiar en ellos para que le entreguen solo el jQuery;)


Editar: Esto no funciona en varios dominios a menos que se establezca el encabezado CORS apropiado.

Hay dos cosas diferentes aquí: el estilo del bloque de iframe y el estilo de la página incrustada en el iframe. Puede configurar el estilo del bloque iframe de la manera habitual:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

El estilo de la página incrustada en el iframe debe configurarse incluyéndolo en la página secundaria:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

O se puede cargar desde la página principal con Javascript:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);

Ampliando la solución jQuery anterior para hacer frente a cualquier retraso en la carga del contenido del marco.

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});

Creo que la forma más fácil es agregar otro div, en el mismo lugar que el iframe, entonces

haga que su z-index más grande que el contenedor de iframe, para que pueda diseñar fácilmente su propia div. Si necesita hacer clic en él, solo use pointer-events:none en su propia división, por lo que el iframe funcionaría en caso de que necesite hacer clic en él;)

Espero que ayude a alguien;)


La mayoría de los navegadores manejan universalmente un iframe como una página HTML diferente. Si desea aplicar la misma hoja de estilo al contenido del iframe, simplemente refiérase a las páginas que se usan allí.


Lo siguiente funcionó para mí.

var iframe = top.frames[name].document;
var css = '' +
          '<style type="text/css">' +
          'body{margin:0;padding:0;background:transparent}' +
          '</style>';
iframe.open();
iframe.write(css);
iframe.close();

var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));

Si controla la página en el iframe, como dijo hangy, el método más sencillo es crear un archivo CSS compartido con estilos comunes, luego vincularlo desde sus páginas html.

De lo contrario, es poco probable que pueda cambiar dinámicamente el estilo de una página desde una página externa en su iframe. Esto se debe a que los navegadores han reforzado la seguridad en las secuencias de comandos de dominios de fotogramas cruzados debido a un posible uso indebido para suplantación de identidad y otros trucos.

Este tutorial puede proporcionarle más información sobre scripts de iframes en general. Acerca de los scripts entre marcos explica las restricciones de seguridad desde la perspectiva de IE.


Aquí se explica cómo aplicar el código CSS directamente sin utilizar <link> para cargar una hoja de estilo adicional.

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

Esto oculta el banner en la página de iframe. ¡Gracias por tus sugerencias!


Si el contenido del iframe no está completamente bajo su control o si desea acceder al contenido desde diferentes páginas con diferentes estilos, podría intentar manipularlo utilizando 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);

Tenga en cuenta que, según el navegador que utilice, es posible que solo funcione en las páginas servidas del mismo dominio.


Hay un script maravilloso que reemplaza un nodo con una versión de iframe de sí mismo. CodePen Demo

Ejemplos de uso:

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

Como alternativa, puedes usar la tecnología CSS-in-JS, como debajo de lib:

https://github.com/cssobj/cssobj

Puede inyectar objetos JS como CSS a iframe, dinámicamente.


Otras respuestas aquí parecen usar los enlaces jQuery y CSS.

Este código utiliza JavaScript vainilla. Crea un nuevo elemento <style> . Establece el contenido de texto de ese elemento como una cadena que contiene el nuevo CSS. Y agrega ese elemento directamente a la cabeza del documento iframe.

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  '.some-class-name {' +
  '  some-style-name: some-value;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

La mejor manera puede ser la siguiente (si controla el sitio de destino):

1) establecer el enlace iframe con el parámetro de style , como:

http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D

(La última frase es a{color:red} codificado por la función urlencode .

2) establece el target.php página del receptor de esta manera:

<head>
..........
<style><? echo urldecode($_GET['style']);?> </style>
..........

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);


No podrá aplicar estilo al contenido del iframe de esta manera. Mi sugerencia sería utilizar scripts de servidor (PHP, ASP o un script de Perl) o encontrar un servicio en línea que convierta una fuente a código JavaScript. La única otra forma de hacerlo sería si puede incluir un servidor.







iframe