我有一个简单的页面，有一些iframe部分(显示RSS链接)。如何将相同的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”标签，这是另一种选择
其他回答
这就是我在生产中所做的。值得记住的是，如果iframe属于其他网站，它将触发CORS错误，将无法工作。
var $iframe = document.querySelector(`iframe`);
var doc = $iframe.contentDocument;
var style = doc.createElement("style");
style.textContent = `*{display:none!important;}`;
doc.head.append(style);
在某些情况下，你可能还想给iframe附加一个load事件:
var $iframe = document.querySelector(`iframe`);
$iframe.addEventListener("load", function() {
var doc = $iframe.contentDocument;
var style = doc.createElement("style");
style.textContent = `*{display:none!important;}`;
doc.head.append(style);
});
编辑:除非设置了适当的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);
如果你想从主页重用CSS和JavaScript，也许你应该考虑用Ajax加载的内容替换<IFRAME>。当搜索机器人能够执行JavaScript时，这对SEO更加友好。
这是一个jQuery的例子，包括另一个html页面到您的文档。这比iframe更有利于搜索引擎优化。为了确保机器人没有索引所包含的页面，只需在robots.txt中将其添加为禁止
<html>
<header>
<script src="/js/jquery.js" type="text/javascript"></script>
</header>
<body>
<div id='include-from-outside'></div>
<script type='text/javascript'>
$('#include-from-outside').load('http://example.com/included.html');
</script>
</body>
</html>
你也可以直接从谷歌:http://code.google.com/apis/ajaxlibs/documentation/中包含jQuery——这意味着可选的自动包含新版本和一些显著的速度提升。同时，这意味着你必须相信他们交付给你的只是jQuery;)
以上方法稍加改变即可奏效:
var cssLink = document.createElement("link")
cssLink.href = "pFstylesEditor.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this
var doc=document.getElementById("edit").contentWindow.document;
//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();
//Then append child
doc.body.appendChild(cssLink);
工作良好的ff3和ie8至少
如果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);
请注意，根据您使用的浏览器，这可能只适用于来自同一域的页面。
