Question Comment appliquer CSS à iframe?


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


858
2017-10-20 08:27


origine


Réponses:


Modifier: Cela ne fonctionne pas sur le domaine croisé sauf si le CORS en-tête est réglé.

Il y a deux choses différentes ici: le style du bloc iframe et le style de la page incorporé 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 incorporé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 il peut être chargé à partir de la page parente avec 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



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

Heureusement, l'URL du code d'intégration n'avait aucune restriction sur l'accès direct, donc en utilisant la fonction PHP file_get_contents il est possible d'obtenir le contenu entier de la page. 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');

Ajouter le chemin à 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 juste avant la head étiquette de fin.)

Spécifiez l'URL de base de l'URL d'origine au cas où css et js sont appelés relativement:

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

Le final google.php le fichier 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;

Ensuite, vous changez le iframe intégrer le code à:

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

Bonne chance!


174
2017-09-20 22:21



Si le contenu de l'iframe n'est pas entièrement sous votre contrôle ou si vous voulez accéder au contenu 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 ne fonctionnera que sur les pages desservies par le même domaine.


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 est universellement géré 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 vous suffit de la référencer à partir des pages utilisées ici.


35
2017-10-20 08:37



Si vous contrôlez la page dans l'iframe, comme l'a dit hangy, l'approche la plus simple consiste à créer un fichier CSS partagé avec des styles communs, puis simplement le lier à partir de vos pages html.

Sinon, il est peu probable que vous puissiez changer dynamiquement le style d'une page à partir d'une page externe de votre iframe. Ceci est dû au fait que les navigateurs ont renforcé la sécurité sur les scripts de cadres croisés en raison d'un mauvais usage possible de l'usurpation d'identité et d'autres hacks.

Ce tutoriel peut vous fournir plus d'informations sur les scripts iframes en général. À propos des scripts d'images croisées explique les restrictions de sécurité de la perspective IE.


26
2017-10-20 08:52



Voici comment appliquer le code CSS directement sans utiliser <link> charger une feuille de style supplémentaire.

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

Cela masque la bannière dans la page iframe. Merci pour vos suggestions!


24
2017-10-15 22:47