¿Cómo aplicar CSS al iframe?
Tengo una página sencilla 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?
Oct 20
'08 15:10
Editar: esto no funciona entre dominios a menos que esté configurado el encabezado CORS apropiado .
Aquí hay dos cosas diferentes: el estilo del bloque iframe y el estilo de la página incrustada en el iframe. Puedes configurar 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 se debe establecer 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);
Encontré este problema con Google Calendar . Quería darle estilo sobre un fondo 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 utilizar la función PHP file_get_contentses posible obtener el contenido completo 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 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 final, justo antes de la headetiqueta final).
Especifique la URL base de la URL original en caso de que css y js se llamen de forma relativa:
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
El archivo final google.phpdeberí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 iframecódigo de inserción a:
<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
¡Buena suerte!
