Comment puis-je styliser le contenu d'un iFrame avec CSS ?

Styliser un iFrame avec CSS

Pour améliorer l'apparence d'un iFrame, il est souvent souhaitable d'appliquer un CSS personnalisé à son contenu. Cependant, étant donné que les iFrames font référence à du contenu d'origines différentes, les restrictions inter-domaines peuvent entraver l'application directe du CSS.

Pour les situations où le contenu de l'iFrame est chargé via un fichier local (par exemple, file://), où le cross- les politiques de domaine ne s'appliquent pas :

<code class="javascript">var cssLink = document.createElement("link");
cssLink.href = "file://path/to/style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['iframe'].document.body.appendChild(cssLink);</code>

Utilisation de jQuery :

<code class="javascript">var $head = $("iframe").contents().find("head");
$head.append($("<link/>", { rel: "stylesheet", href: "file://path/to/style.css", type: "text/css" }));</code>

N'oubliez pas que cette approche peut avoir des implications en matière de sécurité, il est donc essentiel de comprendre les risques potentiels avant la mise en œuvre. Pour plus d'informations sur la gestion de ces risques, reportez-vous au guide sur la désactivation de la politique de même origine dans Safari.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!