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繼承父項

回答

相關問題