使用在iframe之外定義的CSS類，在iframe之外

Question

我們有一個內容管理系統，用於刪除<style>標籤。作爲一種解決方法，我想實現一個iframe，其中包含<style> -tag，並在iframe之外使用這些類。 你知道一個辦法嗎？可能嗎？

Answer 1

如果我對你有幫助，你想重用在iframe（另一個網頁）中定義的css styles？您可以將iframe中的所有styles與javascript附加。這是一個例子。

jsfiddle: styles you want to reuse

只有一個css rule內（僅用於演示目的），但可以有你想要的。現在讓這個類重用（.someclass）。

jsfiddle: reused styles

您可以通過contentWindow存取權限的iframe文檔。

var exampleIFrame = document.getElementById('exampleiframe'); 
var exampleIFrameStyles = exampleIFrame.contentWindow.document.getElementsByTagName('style'); 

然後附加所有iframe樣式應用到當前文檔的head。我已將所有styles合併爲一個。

var tmpStyle = document.createElement('style'); 
tmpStyle.id = "iframe-style"; 
for (var i = 0; i < exampleIFrameStyles.length; ++i) { 
    tmpStyle.appendChild(document.createTextNode(exampleIFrameStyles[i].innerHTML)); 
} 
document.head.appendChild(tmpStyle); 

請看小提琴（s）。我希望這有助於！