Iframe从父项inheritance
我如何使一个<iframe>inheritance其父母的样式和JavaScript。
我努力了
var parentHead = $("head", parent.document).html(); $("head").html(parentHead);
但是，它会去掉<script>标签。 而且，我没有看到影响我的iframe的样式。
有没有更好的/任何其他的方法，我失踪了？ 谢谢。
您可以通过在iframe中包含这样的代码来“inheritance”父代的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>
这将调用单击button时在父页面中定义的名为MyFunc函数。
这是我的“最好的”解决scheme添加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); }
您可以随时收集所有样式，并将其设置为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);
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，但可能相同的方式。
