HTMLIFrameElement：contentWindow 属性

基线广泛可用

自 2015年7月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

contentWindow 属性返回 HTMLIFrameElement 的 Window 对象。

该属性只读。

本文内容

值

一个 Window 对象。

描述

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

通过与消息事件的 source 属性进行比较，还可以使用该属性找出是哪个 iframe 页面发送了 Window.postMessage()。

示例

访问 iframe 的文档

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

请注意，这只有在 iframe 的窗口与其父窗口同源的情况下才有效：否则，尝试访问 contentWindow.document 会出现异常。

js
const iframe = document.querySelector("iframe").contentWindow;

iframe.document.querySelector("body").style.backgroundColor = "blue";
// 这将使文档中的第一个 iframe 变成蓝色。

将消息源映射到 iframe

此示例可在包含多个 iframe 的页面中运行，其中任何一个都可以使用 Window.postMessage() 发送信息。当页面接收到消息时，就会知道哪个 iframe 包含发送消息的窗口。

为了做到这一点，当接收到消息时，页面首先检查消息是否来自预期的源，然后通过比较消息事件的 source 属性和 iframe 的 contentWindow 属性来找到消息来自哪个 iframe。

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

规范

HTML
# dom-iframe-contentwindow

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2025年12月2日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题