问题缘由
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 页面的资源都需要重新加载，很浪费系统资源，所以非必要不使用。