Pregunta ¿Cómo aplicar CSS a iframe?


Tengo una página simple que tiene algunas secciones de marcos (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?


858
2017-10-20 08:27


origen


Respuestas:


Editar: Esto no funciona entre dominios a menos que el apropiado Encabezado CORS Está establecido.

Aquí hay dos cosas diferentes: el estilo del bloque iframe y el estilo de la página incrustado en el iframe. Puede establecer el estilo del bloque iframe de la forma 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 establecerse incluyéndolo en la página secundaria:

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

O puede cargarse 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);

378
2017-10-20 09:07



Conocí este problema con calendario de Google. Quería darle un estilo más oscuro y cambiar la fuente.

Afortunadamente, la URL del código de inserción no tenía restricciones de acceso directo, por lo que al usar la función de PHP file_get_contents es posible obtener el 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');

Agregar la ruta a su hoja de estilo:

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

(Esto colocará su hoja de estilo al último justo antes del head etiqueta final)

Especifique la url base de la url original en caso de que css y js se llamen relativamente:

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

El final google.php el archivo 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 cambias el iframe insertar código en:

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

¡Buena suerte!


174
2017-09-20 22:21



Si el contenido del iframe no está completamente bajo su control o si desea acceder al contenido de diferentes páginas con diferentes estilos, puede 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);

Tenga en cuenta que, dependiendo del navegador que use, esto podría funcionar únicamente en páginas servidas desde el mismo dominio.


69
2017-10-20 08:58



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

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

51
2017-11-21 16:17



Un iframe es manejado universalmente como una página HTML diferente por la mayoría de los navegadores. Si desea aplicar la misma hoja de estilo al contenido del iframe, simplemente hágalo desde las páginas utilizadas allí.


35
2017-10-20 08:37



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, luego solo vincúlalo desde tus 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 restringido la seguridad de las secuencias de comandos dom crossframe, debido a un posible uso indebido de spoofing y otros hacks.

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


26
2017-10-20 08:52



Aquí es cómo aplicar código CSS directamente sin usar <link> para cargar una hoja de estilo extra

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 iframe. ¡Gracias por tus sugerencias!


24
2017-10-15 22:47



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


20
2017-07-28 22:53