web-dev-qa-db-fra.com

Iframe hérite du parent

Comment créer un <iframe> hérite des styles et du javascript de ses parents.

J'ai essayé

var parentHead = $("head", parent.document).html();
$("head").html(parentHead);

Mais, il supprime le <script> Mots clés. De plus, je ne vois pas les styles affectant mon iframe.

Existe-t-il une meilleure/autre approche à ce sujet qui me manque? Merci.

javascriptjqueryhtmlcssiframe
42
Robin Maben

Vous pouvez "hériter" du CSS du parent en ayant un tel code dans l'iframe:

<head>
<script type="text/javascript">
window.onload = function() {
    if (parent) {
        var oHead = document.getElementsByTagName("head")[0];
        var arrStyleSheets = parent.document.getElementsByTagName("style");
        for (var i = 0; i < arrStyleSheets.length; i++)
            oHead.appendChild(arrStyleSheets[i].cloneNode(true));
    }
}
</script>
</head>

A bien fonctionné pour moi dans IE, Chrome et Firefox.

En ce qui concerne JavaScript, je n'ai pas trouvé de moyen d'ajouter directement le JavaScript parent dans l'iframe, mais vous pouvez ajouter parent. n'importe où pour utiliser le JS depuis le parent, par exemple:

<button type="button" onclick="parent.MyFunc();">Click please</button>

Cela invoquera la fonction appelée MyFunc définie dans la page parent lorsque vous cliquez sur le bouton.

47
Shadow Wizard

Voici ma solution "best of" pour ajouter les styles du parent de l'iframe (pas les scripts). Il fonctionne avec IE6-11, Firefox, Chrome, (ancien) Opera et probablement partout.

function importParentStyles() {
    var parentStyleSheets = parent.document.styleSheets;
    var cssString = "";
    for (var i = 0, count = parentStyleSheets.length; i < count; ++i) {
        if (parentStyleSheets[i].cssRules) {
            var cssRules = parentStyleSheets[i].cssRules;
            for (var j = 0, countJ = cssRules.length; j < countJ; ++j)
                cssString += cssRules[j].cssText;
        }
        else
            cssString += parentStyleSheets[i].cssText;  // IE8 and earlier
    }
    var style = document.createElement("style");
    style.type = "text/css";
    try {
        style.innerHTML = cssString;
    }
    catch (ex) {
        style.styleSheet.cssText = cssString;  // IE8 and earlier
    }
    document.getElementsByTagName("head")[0].appendChild(style);
}
22
Tobias81

Vous pouvez toujours collecter tous les styles à chaîne et le définir comme innerHTML de l'élément de style dans iframe.

var selfStyleSheets = document.styleSheets;
var cssString = [];
for (var i = 0, count = selfStyleSheets.length; i < count; i++)
{
    var cssRules = selfStyleSheets[i].cssRules;
    for (var j = 0, countJ = cssRules.length; j < countJ; j++)
    {
        cssString.Push(cssRules[j].cssText);
    }
}
var styleEl = iframe.contentDocument.createElement('style');
styleEl.type = 'text/css';
styleEl.innerHTML = cssString.join("\n");

iframe.contentDocument.head.appendChild(styleEl);
1
Alexey