HTMLIFrameElement: contentWindow property

Value

A Window object.

Description

Access to the Window returned by contentWindow is subject to the rules defined by the same-origin policy, meaning that if the iframe is same-origin with the parent, then the parent can access the iframe's document and its internal DOM, and if they are cross-origin, it gets very limited access to the window's attributes. See "Cross-origin script API access" for details.

Pages can also use this property to find out which iframe sent a message using Window.postMessage(), by comparing it with the message event's source property.

Examples

Accessing an iframe's document

This example modifies the style attribute of the document body.

Note that this only works if the iframe's window is same-origin with its parent: otherwise attempting to access contentWindow.document will throw an exception.

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

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

Mapping message sources to iframes

This example could run in a page that hosts several iframes, any of which can send it messages using Window.postMessage(). When the page receives a message, it wants to know which iframe contains the window that sent the message.

To do this, when it receives a message, the page first checks that the message was from the expected origin, and then finds the iframe that was the source of the message by comparing the message event's source property with the iframe's contentWindow property.

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

Specifications

Browser compatibility