html jquery ejemplo - ¿Cómo aplicar CSS a iframe?





13 Answers

Me encontré con este problema con Google Calendar . Quería estilizarlo en un fondo más oscuro y cambiar la fuente.

Afortunadamente, la URL del código de inserción no tenía restricciones en el acceso directo, por lo que al usar la función PHP file_get_contents es posible obtener todo el contenido de la página. En lugar de llamar a la URL de Google, es posible llamar a un archivo php ubicado en su servidor, ej. google.php , que contendrá el contenido original con modificaciones:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

Agregando el camino a su hoja de estilo:

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

(Esto colocará la última hoja de estilo justo antes de la etiqueta de head ).

Especifique la url base desde la url original en caso de que se llame relativamente a css y js:

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

El archivo final google.php debería verse así:

<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;

Luego cambia el código de incrustación de iframe a:

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

¡Buena suerte!

insertar example javascript

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?




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.




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



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



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.




uso puede probar esto:

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



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




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




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




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.




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!




Related