HTMLIFrameElement: contentWindow 属性

基线 广泛可用

此功能已相当成熟，可在许多设备和浏览器版本中使用。它从 2015 年 7 月.

报告反馈

contentWindow 属性返回 Window 对象，该对象属于 HTMLIFrameElement。

值

此属性为只读。

描述

一个 Window 对象。

对 contentWindow 返回的 Window 的访问受 同源策略 规则的约束，这意味着如果 iframe 与父级同源，则父级可以访问 iframe 的文档及其内部 DOM，如果它们是跨源的，则父级对窗口属性的访问权限非常有限。有关详细信息，请参阅 "跨源脚本 API 访问"。

示例

页面还可以使用此属性来确定哪个 iframe 使用 Window.postMessage() 发送消息，方法是将其与消息事件的 source 属性进行比较。

访问 iframe 的文档

此示例修改了文档正文的 style 属性。

请注意，这仅在 iframe 的窗口与父级同源时才有效：否则，尝试访问 contentWindow.document 将抛出异常。
const iframe = document.querySelector("iframe").contentWindow;

iframe.document.querySelector("body").style.backgroundColor = "blue";
// this would turn the 1st iframe in document blue.

js

将消息源映射到 iframe

此示例可以在托管多个 iframe 的页面中运行，这些 iframe 中的任何一个都可以使用 Window.postMessage() 向其发送消息。当页面收到消息时，它希望知道哪个 iframe 包含发送消息的窗口。

请注意，这仅在 iframe 的窗口与父级同源时才有效：否则，尝试访问 contentWindow.document 将抛出异常。
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);
});

规范

为此，当它收到消息时，页面首先检查消息是否来自预期的来源，然后通过将消息事件的 source 属性与 iframe 的 contentWindow 属性进行比较来找到消息来源的 iframe。
规范
# HTML 标准

浏览器兼容性

dom-iframe-contentwindow