我有一个简单的页面，有一些iframe部分(显示RSS链接)。如何将相同的CSS格式从主页应用到iframe中显示的页面?
当前回答
如果你想从主页重用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;)
其他回答
有一个很棒的脚本可以用节点本身的iframe版本替换节点。 CodePen演示
使用例子:
// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);
// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
return iframify(component, {});
});
// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
headExtra: '<style>.component { color: red; }</style>',
metaViewport: '<meta name="viewport" content="width=device-width">'
});
iframe被大多数浏览器像处理一个不同的HTML页面一样处理。如果希望对iframe的内容应用相同的样式表，只需从其中使用的页面引用它。
我是这么做的:
Div与类保存iframe 将iframe添加到div中。 在CSS文件中
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }
这在IE 6中有效。应该可以在其他浏览器上运行，请检查!
这里的其他答案似乎使用了jQuery和CSS链接。
这段代码使用了普通JavaScript。它创建了一个新的<style>元素。它将该元素的文本内容设置为包含新CSS的字符串。它将该元素直接追加到iframe文档的头部。
var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
'.some-class-name {' +
' some-style-name: some-value;' +
'}'
;
iframe.contentDocument.head.appendChild(style);
如果您在iframe中控制页面，如hangy所说，最简单的方法是创建一个具有通用样式的共享CSS文件，然后只需从html页面链接到它。
否则，您不太可能从iframe中的外部页面动态更改页面的样式。这是因为浏览器已经加强了跨帧dom脚本的安全性，因为可能会滥用欺骗和其他黑客行为。
本教程可能会为您提供更多关于编写iframe脚本的信息。关于跨框架脚本从IE的角度解释了安全限制。
