HTMLIFrameElement:contentWindow 属性
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
contentWindow
属性返回 HTMLIFrameElement 的 Window 对象。
该属性只读。
值
一个 Window 对象。
描述
访问由 contentWindow
返回的 Window
受到同源策略规定的规则约束,这意味着,如果与 iframe 父级同源,那么父级页面可以访问 iframe 的文档以及内部 DOM,如果它们跨源,则父页面对窗口属性的访问权限极其有限。有关详细信息,请参阅跨源脚本 API 访问。
通过与消息事件的 source
属性进行比较,还可以使用该属性找出是哪个 iframe 页面发送了 Window.postMessage()
。
示例
访问 iframe 的文档
此示例修改了文档主体的 style
属性。
请注意,这只有在 iframe 的窗口与其父窗口同源的情况下才有效:否则,尝试访问 contentWindow.document
会出现异常。
const iframe = document.querySelector("iframe").contentWindow;
iframe.document.querySelector("body").style.backgroundColor = "blue";
// 这将使文档中的第一个 iframe 变成蓝色。
将消息源映射到 iframe
此示例可在包含多个 iframe 的页面中运行,其中任何一个都可以使用 Window.postMessage()
发送信息。当页面接收到消息时,就会知道哪个 iframe 包含发送消息的窗口。
为了做到这一点,当接收到消息时,页面首先检查消息是否来自预期的源,然后通过比较消息事件的 source
属性和 iframe 的 contentWindow
属性来找到消息来自哪个 iframe。
const expectedOrigin = "https://example.org";
const iframes = Array.from(document.querySelectorAll("iframe"));
window.addEventListener("message", (e) => {
if (e.origin !== expectedOrigin) return;
const sourceIframe = iframes.find(
(iframe) => iframe.contentWindow === e.source,
);
console.log(sourceIframe);
});
规范
Specification |
---|
HTML Standard # dom-iframe-contentwindow |
浏览器兼容性
BCD tables only load in the browser