[html] ¿Cómo aplicar CSS a iframe?



Answers

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

Afortunadamente, la URL del código incrustado no tenía restricciones para 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');

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 final justo antes de la etiqueta de head ).

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 último archivo 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 iframe del iframe a:

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

¡Buena suerte!

Question

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?




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



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




Ampliando la solución jQuery anterior para hacer frente a cualquier retraso en la carga de los contenidos 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();
});



Aquí, hay dos cosas dentro del dominio

  1. Sección iFrame
  2. Página cargada dentro del iFrame

Entonces, quiere darle un estilo a esas dos secciones de la siguiente manera:

1. Estilo para la sección iFrame

Puede diseñar usando CSS con ese id Respetado o nombre de class . También puede diseñarlo en sus hojas de estilo para padres.

<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>

<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>

2. Style the Page Loaded dentro del iFrame

Este estilo se puede cargar desde la página principal con la ayuda de Javascript

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

luego configure ese archivo CSS en la respetada sección iFrame

//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile); 
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);

Aquí, puede editar la parte principal de la página dentro del iFrame utilizando esta forma también

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead .append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath , 
      type: "text/css" }
     ));



el uso puede intentar esto:

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



Podemos insertar la 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>



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

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



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

1) configure el enlace de 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) configure la página del receptor target.php siguiente manera:

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



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 en 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 las secuencias de comandos de marco cruzado explica las restricciones de seguridad desde la perspectiva de IE.




No podrá diseñar el contenido del iframe de esta manera. Mi sugerencia sería utilizar secuencias de comandos en el servidor (PHP, ASP o un script de Perl) o buscar un servicio en línea que convierta un feed en código JavaScript. La única otra forma de hacerlo sería si puede incluir un servidor.




Bien, he seguido estos pasos:

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

Esto funciona en IE 6. Debe funcionar en otros navegadores, ¡revisa!




En caso de que tenga acceso a la página de iframe y desee un CSS diferente para aplicar en él 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

verificar sobre postMessage()

plan es enviar el css a iframe como un mensaje como

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

* es enviar este mensaje independientemente del dominio en el iframe

y reciba el mensaje en iframe y agregue el mensaje recibido (CSS) a ese encabezado de 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>');

});



Related