iframe 从父级继承答案

【问题标题】：Iframe inherit from parentiframe 从父级继承
【发布时间】：2011-01-06 06:25:38
【问题描述】：

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

我试过了

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

但是，它去掉了<script> 标签。此外，我没有看到影响 iframe 的样式。

我缺少更好的/其他方法吗？谢谢。

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案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 的函数。

【讨论】：

我认为你应该在父级头部寻找的元素不是style，而是link。
请注意，您不能跨域执行此操作 - iframe 必须是本地的，子级才能查询父级的 DOM。
但是继承样式和js的重点是不要在子页面上再次调用它们，因此只在父页面加载一次。似乎这种方法对这个问题没有帮助。
@anakin 我承认，如果不再次打电话给他们，我不知道有什么方法可以做到这一点。你的意思是像this other answer这样的东西吗？
优秀，只是我从 iframe 到父级进行了一次体面的 hack！

【解决方案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);
}

【讨论】：

这是一个很好的答案。但是如果父级有，则缺少导入的CssRules。
这在 IE 中在某些情况下访问 cssText 时会出现问题，即关键帧规则。您将收到“未找到成员”connect.microsoft.com/IE/feedback/details/955703/…
这是一个很棒的答案。您可能希望在 try...catch 块中访问 cssRules 属性，因为在某些情况下访问可能会被拒绝。

【解决方案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);

【讨论】：

不适用于 IE6-8（如果重要的话）。它实际上也没有回答问题，因为它的作用正好相反（将 iframe 的样式添加到父级）。

【解决方案4】：

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

还有 stlye.css 作为父母的风格？不确定javascript，但可能相同。

【讨论】：