我有一个简单的页面,有一些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);

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

https://github.com/cssobj/cssobj

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

下面的方法对我很有效。

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的内容不完全在您的控制之下,或者您希望以不同的样式访问来自不同页面的内容,您可以尝试使用JavaScript操作它。

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

请注意,根据您使用的浏览器,这可能只适用于来自同一域的页面。

如果您在iframe中控制页面,如hangy所说,最简单的方法是创建一个具有通用样式的共享CSS文件,然后只需从html页面链接到它。

否则,您不太可能从iframe中的外部页面动态更改页面的样式。这是因为浏览器已经加强了跨帧dom脚本的安全性,因为可能会滥用欺骗和其他黑客行为。

本教程可能会为您提供更多关于编写iframe脚本的信息。关于跨框架脚本从IE的角度解释了安全限制。