web-dev-qa-db-ja.com

iframeは親から継承します

<iframe>にその親のスタイルとJavaScriptを継承させるにはどうすればよいですか。

私が試してみました

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

ただし、<script>タグは削除されます。さらに、iframeに影響するスタイルは見当たりません。

これに対してより良い/他のアプローチがありますか？ありがとう。

javascriptjqueryhtmlcssiframe
42
Robin Maben

このようなコードをiframeに含めることで、親のCSSを「継承」できます。

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

IEでは、ChromeとFirefox。

JavaScriptについては、親JavaScriptをiframeに直接追加する方法が見つかりませんでしたが、parent.任意の場所で、親内からJSを使用します。例：

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

これにより、ボタンがクリックされたときに親ページで定義されたMyFuncという関数が呼び出されます。

47
Shadow Wizard

Iframeの親（スクリプトではなく）のスタイルを追加するための私の「ベスト」ソリューションです。 IE6-11、Firefox、Chrome、（古い）Operaおよびおそらくどこでも動作します。

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

すべてのスタイルをいつでも文字列に収集し、iframeのスタイル要素のinnerHTMLとして設定できます。

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