在 iframe 中继承父窗口 css/js 的方法

问题缘由

iframe 属于一个单独的文档（单独的网页窗口）不能直接使用父页面的资源，如 css 和 js。

如果 iframe 和父页面同域则可以在 iframe 中使用 parent 对象来使用父页的 js 对象

继承 css

因为 iframe 是单独的网页窗口，所以页面一般都有 head 标签的。在 iframe 子页面的 head 标签中加入如下代码：

<script>
    window.parent.$(function () {  // 使用 vindow.parent 调用父级 jquery
    var head = document.getElementsByTagName("head").item(0);

    var linkList = window.parent.document.getElementsByTagName("link");  // 获取父窗口 link 标签对象列表
    for (var i = 0; i < linkList.length; i++) {
        var _link = document.createElement("link");
        _link.rel = 'stylesheet';
        _link.type = 'text/css';
        _link.href = linkList[i].href;
        head.appendChild(_link);
    }
});
</script>

继承 js

和上面类似，在 iframe 子页面的 body 标签尾部加入如下代码：

<script>
    window.parent.$(function () {  // 使用 vindow.parent 调用父级 jquery
    var body = document.getElementsByTagName("body").item(0);

    var scriptList = window.parent.document.getElementsByTagName("script");  // 获取父窗口 script 标签对象列表
    for (var i =0 ; i < scriptList.length; i++) {
        var _script = document.createElement("script");
        _script.type = 'text/script';
        _script.src = scriptList[i].src;
        body.appendChild(_script);
    }
});
</script>

问题

因为 iframe 页面相当于单独窗口，所以每个 iframe 页面的资源都需要重新加载，很浪费系统资源，所以非必要不使用。