我有一个简单的页面,有一些iframe部分(显示RSS链接)。如何将相同的CSS格式从主页应用到iframe中显示的页面?


当前回答

我是这么做的:

Div与类保存iframe 将iframe添加到div中。 在CSS文件中

divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

这在IE 6中有效。应该可以在其他浏览器上运行,请检查!

其他回答

var link1 = document.createElement('link'); link1。type = 'text/css'; link1。rel =“样式表”; link1。href = "../../assets/css/normalize.css"; 窗口框架[' richTextField ']文件。身体。appendChild (link1);

下面的方法对我很有效。

var iframe = top.frames[name].document;
var css = '' +
          '<style type="text/css">' +
          'body{margin:0;padding:0;background:transparent}' +
          '</style>';
iframe.open();
iframe.write(css);
iframe.close();

你不能这样样式iframe的内容。我的建议是使用服务器端脚本(PHP、ASP或Perl脚本),或者找到可以将提要转换为JavaScript代码的在线服务。唯一的另一种方法是如果你能做一个服务器端包含。

作为替代,你可以使用CSS-in-JS技术,如下所示:

https://github.com/cssobj/cssobj

它可以动态地将JS对象作为CSS注入iframe

我找到了另一个解决方案,把样式放在主html像这样

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

然后在iframe中这样做(参见js的onload)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

在js中

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

这可能不是最好的解决方案,当然也可以改进,但如果您想在父窗口中保留“style”标签,这是另一种选择