我有一个简单的页面,有一些iframe部分(显示RSS链接)。如何将相同的CSS格式从主页应用到iframe中显示的页面?
当前回答
这就是我在生产中所做的。值得记住的是,如果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);
});
其他回答
有一个很棒的脚本可以用节点本身的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页面,想要一个不同的CSS应用在它上,只有当你加载它通过iframe在你的页面上,在这里我找到了一个解决方案,这类事情
即使iframe正在加载不同的域,这也是有效的
检查postMessage()
计划是,将CSS作为消息发送到iframe
iframenode.postMessage('h2{color:red;}','*');
*是发送这条消息,不管它在iframe中的哪个域
并在iframe中接收消息,并将接收到的消息(CSS)添加到该文档头。
在iframe页面中添加的代码
window.addEventListener('message',function(e){
if(e.data == 'send_user_details')
document.head.appendChild('<style>'+e.data+'</style>');
});
var link1 = document.createElement('link'); link1。type = 'text/css'; link1。rel =“样式表”; link1。href = "../../assets/css/normalize.css"; 窗口框架[' richTextField ']文件。身体。appendChild (link1);
我认为最简单的方法是添加另一个div,在相同的地方iframe,然后
使它的z-index大于iframe容器,所以你可以很容易地只是样式你自己的div。如果你需要点击它,只需使用指针事件:没有在你自己的div,所以iframe将工作,以防你需要点击它;)
我希望它能帮助到别人;)
我是这么做的:
Div与类保存iframe 将iframe添加到div中。 在CSS文件中
divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }
这在IE 6中有效。应该可以在其他浏览器上运行,请检查!