View in EnglishAlways switch to English

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 ⁨2015年7月⁩.

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);});