Question

如何让<iframe>继承其父级的样式和javascript。

我试过了

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

但是，它删除了<script>标签。而且，我没有看到影响我的iframe的样式。

我缺少更好/任何其他方法吗？感谢。

Answer 1

您可以通过在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的函数。

Answer 2

这是我添加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);
}

Answer 3

您始终可以将所有样式收集到字符串中，并将其设置为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);

Answer 4

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

而style.css是父母的风格吗？不确定javascript，但可能是相同的。

iframe继承自父级

4 个答案: