Iframe继承父项

如何使继承其父项的样式和javascript。Iframe继承父项

我已经试过

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

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

有没有更好的/任何其他的方法来解决这个问题？谢谢。

来源

2011-01-06 Robin Maben

，如果你可以添加JavaScript代码，你可以给予适当的iframe HTML – 2011-01-06 06:31:43

通过在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的函数。

来源

2011-01-06 08:54:16

我想你应该在父的头元素不是`style`但`link`。 – Bazzz 2011-01-06 14:49:22

@Bazzz yep可能需要添加这些内容。 – 2011-01-06 19:55:01

+19

请注意，您无法跨域进行此操作 - iframe必须是本地的，才能查询父级的DOM。 – RET 2011-06-10 06:45:10

-1

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，但可能相同的方式。

来源

2011-01-06 06:33:00

您可以随时收集所有样式并将其设置为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);

来源

2013-04-18 15:50:23 Alexey

这是我的“最好的”解决方案添加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); 
}

来源

2015-01-29 14:48:32 Tobias81

Iframe继承父项

回答

相关问题