我有一个简单的页面,有一些iframe部分(显示RSS链接)。如何将相同的CSS格式从主页应用到iframe中显示的页面?
当前回答
由于许多答案都是针对相同的域编写的,我将在跨域中编写如何做到这一点。
首先,您需要了解Post Message API。我们需要一个信使在两个窗口之间交流。
这是我创造的信使。
/**
* Creates a messenger between two windows
* which have two different domains
*/
class CrossMessenger {
/**
*
* @param {object} otherWindow - window object of the other
* @param {string} targetDomain - domain of the other window
* @param {object} eventHandlers - all the event names and handlers
*/
constructor(otherWindow, targetDomain, eventHandlers = {}) {
this.otherWindow = otherWindow;
this.targetDomain = targetDomain;
this.eventHandlers = eventHandlers;
window.addEventListener("message", (e) => this.receive.call(this, e));
}
post(event, data) {
try {
// data obj should have event name
var json = JSON.stringify({
event,
data
});
this.otherWindow.postMessage(json, this.targetDomain);
} catch (e) {}
}
receive(e) {
var json;
try {
json = JSON.parse(e.data ? e.data : "{}");
} catch (e) {
return;
}
var eventName = json.event,
data = json.data;
if (e.origin !== this.targetDomain)
return;
if (typeof this.eventHandlers[eventName] === "function")
this.eventHandlers[eventName](data);
}
}
在两个窗口中使用这种方法进行交流可以解决你的问题。
在主窗口,
var msger = new CrossMessenger(iframe.contentWindow, "https://iframe.s.domain");
var cssContent = Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent", {
css: cssContent
})
然后,从Iframe接收事件。
在Iframe中:
var msger = new CrossMessenger(window.parent, "https://parent.window.domain", {
cssContent: (data) => {
var cssElem = document.createElement("style");
cssElem.innerHTML = data.css;
document.head.appendChild(cssElem);
}
})
详见完整Javascript和Iframes教程。
其他回答
iframe被大多数浏览器像处理一个不同的HTML页面一样处理。如果希望对iframe的内容应用相同的样式表,只需从其中使用的页面引用它。
如果你有访问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>');
});
这里的其他答案似乎使用了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属于其他网站,它将触发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中控制页面,如hangy所说,最简单的方法是创建一个具有通用样式的共享CSS文件,然后只需从html页面链接到它。
否则,您不太可能从iframe中的外部页面动态更改页面的样式。这是因为浏览器已经加强了跨帧dom脚本的安全性,因为可能会滥用欺骗和其他黑客行为。
本教程可能会为您提供更多关于编写iframe脚本的信息。关于跨框架脚本从IE的角度解释了安全限制。
推荐文章
- HTML的“nonce”属性用于脚本和样式元素的目的是什么?
- 我如何在HTML中创建一个泪滴?
- 在另一个js文件中调用JavaScript函数
- 我怎么能强迫一个长字符串没有任何空白被包装?
- 在哪里放置JavaScript在HTML文件?
- 如何在引导栏中居中内容?
- IE8问题推特引导3
- 是否有可能使一个div 50px小于100%在CSS3?
- 为什么CSS选择器/ HTML属性首选破折号?
- CSS选择器-具有给定子元素的元素
- 如何在标题属性中转义双引号
- 在不使用LESS的情况下更改引导导航栏折叠断点
- Safari和Chrome桌面浏览器无法自动播放视频
- 自动高度
- 如何将JavaScript文件链接到HTML文件?