html - scrolling - ¿Cómo aplicar CSS a iframe?




insertar iframe css (18)

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

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?


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!


Bueno, he seguido estos pasos:

  1. Div con una clase para sostener iframe
  2. Agrega iframe a la div .
  3. En el archivo CSS,
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

Esto funciona en IE 6. Debería funcionar en otros navegadores, compruebe!


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.


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>');

});

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">'
});

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 anterior con un pequeño cambio funciona:

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

Funciona bien con ff3 y ie8 al menos


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();

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>

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.


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>

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.


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.


uso puede probar esto:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </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);


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

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






iframe