使用在iframe之外的iframe内定义的CSS类

Question

我们有一个删除celery.py标记的内容管理系统。作为一种解决方法，我想实现一个iframe，其中包含我的类<style> - 标记，并在iframe之外使用这些类。 你知道这样做的方法吗？有可能吗？

Answer 1

如果我说得对，你想重用css styles（另一个网页）中定义的iframe吗？您可以使用styles附加iframe中的所有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);

请参阅小提琴。我希望有所帮助！