如何将CSS应用到iframe?

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

当前回答

如果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);

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

2008-10-20 08:58:47

其他回答

编辑:除非设置了适当的CORS报头，否则不能跨域工作。

这里有两个不同的东西:iframe块的样式和嵌入在iframe中的页面的样式。你可以用通常的方法设置iframe块的样式:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

iframe中嵌入的页面样式必须通过在子页面中包含它来设置:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

或者它可以从父页面加载Javascript:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);

2008-10-20 09:07:48

当你说“doc.open()”这意味着你可以在iframe里面写任何HTML标签，所以你应该为HTML页面写所有的基本标签，如果你想在你的iframe头部有一个CSS链接，就写一个iframe里面有CSS链接。我给你们举个例子:

doc.open();

doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

2010-11-08 06:25:23

下面的方法对我很有效。

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();

2011-05-23 16:22:09

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

2016-10-28 03:14:28

我认为最简单的方法是添加另一个div，在相同的地方iframe，然后

使它的z-index大于iframe容器，所以你可以很容易地只是样式你自己的div。如果你需要点击它，只需使用指针事件:没有在你自己的div，所以iframe将工作，以防你需要点击它;)

我希望它能帮助到别人;)

2014-07-31 12:34:27

如何将CSS应用到iframe?

推荐文章

最新文章

标签