Javascript iframe 从父级继承
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4612374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iframe inherit from parent
提问by Robin Maben
How do I make an <iframe>inherit its parent's styles and javascript.
我如何使<iframe>继承其父的样式和 javascript。
I have tried
我试过了
var parentHead = $("head", parent.document).html();
$("head").html(parentHead);
But, it strips out the <script>tags.
Moreover, I do not see the styles affecting my iframe.
但是，它去掉了<script>标签。此外，我没有看到影响 iframe 的样式。
Is there a better/any other approach to this that I'm missing? Thanks.
有没有更好的/任何其他方法来解决这个问题？谢谢。
回答by Shadow Wizard is Ear For You
You can "inherit" the CSS of the parent by having such code in the iframe:
您可以通过在 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>
Worked fine for me in IE, Chrome and Firefox.
在 IE、Chrome 和 Firefox 中对我来说效果很好。
Regarding JavaScript,
I couldn't find a way to add the parent JavaScript into the iframe directly, however you can add parent.anywhere to use the JS from within the parent, for example:
关于 JavaScript，我找不到直接将父 JavaScript 添加到 iframe 的方法，但是您可以添加parent.任何位置以从父级内部使用 JS，例如：
<button type="button" onclick="parent.MyFunc();">Click please</button>
This will invoke function called MyFuncdefined in the parent page when the button is clicked.
MyFunc单击按钮时，这将调用在父页面中定义的函数。
回答by Tobias81
Here is my "best of" solution to add the styles of the iframe's parent (not the scripts). It works with IE6-11, Firefox, Chrome, (old) Opera and probably everywhere.
这是我添加 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);
}
回答by Alexey
You can always collect all styles to string and set it as innerHTML of style element in iframe.
您始终可以将所有样式收集到字符串并将其设置为 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);
回答by Badr Hari
var cssLink = document.createElement("link")
cssLink.href = "style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['frame1'].document.body.appendChild(cssLink);
And stlye.css as parent's style? Not sure about javascript, but possibly same way.
和 stlye.css 作为父母的风格？不确定 javascript，但可能同样的方式。
