Comment appliquer le CSS à iFrame ?

Question

J'ai une page simple qui comporte quelques sections iFrame (pour afficher des liens RSS). Comment puis-je appliquer le même format CSS que celui de la page principale à la page affichée dans l'iFrame ?

Answer 1

Edit : Cela ne fonctionne pas de manière transversale.

Il y a deux choses différentes ici : le style du bloc iframe et le style de la page intégrée dans l'iframe. Vous pouvez définir le style du bloc iframe de la manière habituelle :

<iframe name='iframe1' id="iframe1" src="empty.htm" frameborder="0" border="0" cellspacing="0" style="border-style: none;width: 100%; height: 120px;"></iframe>

Le style de la page intégrée dans l'iframe doit être défini en l'incluant dans la page enfant :

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

Ou bien il peut être chargé à partir de la page mère avec Javascript :

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame1'].document.body.appendChild(cssLink);

Answer 2

J'ai rencontré ce problème avec Google Agenda . Je voulais le styliser sur un fond plus sombre et changer de police.

Heureusement, l'URL du code d'intégration n'avait aucune restriction sur l'accès direct. Ainsi, en utilisant la fonction PHP " fichier_get_contenu ", il est possible d'obtenir le contenu entier de la page. Donc au lieu d'appeler l'url de google, il est possible d'appeler un fichier php situé sur votre serveur, ex. google.php, qui contiendra le contenu original avec des modifications :

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

Ajout du chemin vers votre feuille de style :

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

(Cela placera votre feuille de style en dernier juste avant l'endtag head).

Spécifiez l'url de base à partir de l'url d'origine dans le cas où css et js sont appelés relativement :

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

Le fichier google.php final devrait ressembler à ceci :

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

Puis vous changez le code d'intégration de l'iframe en :

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

Bonne chance !

Answer 3

Si le contenu de l'iframe n'est pas entièrement sous votre contrôle ou si vous voulez accéder au contenu à partir de différentes pages avec des styles différents, vous pouvez essayer de le manipuler en utilisant 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);

Notez que selon le navigateur que vous utilisez, cela peut ne fonctionner que sur les pages servies par le même domaine.

Answer 4

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

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

Answer 5

Un iframe est universellement traité comme une page HTML différente par la plupart des navigateurs. Si vous souhaitez appliquer la même feuille de style au contenu de l'iframe, il suffit de la référencer à partir des pages qui y sont utilisées.