HTMLIFrameElement: contentWindow-Eigenschaft

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.

Die contentWindow-Eigenschaft gibt das Window-Objekt eines HTMLIFrameElement zurück.

Dieses Attribut ist schreibgeschützt.

Wert

Ein Window-Objekt.

Beschreibung

Der Zugriff auf das Window, das von contentWindow zurückgegeben wird, unterliegt den Regeln, die durch die Same-Origin-Policy definiert sind. Das bedeutet, dass, wenn der iframe die gleiche Herkunft wie das übergeordnete Element hat, das übergeordnete Element auf das Dokument des iframes und dessen internes DOM zugreifen kann. Wenn sie unterschiedliche Herkunft haben, hat es sehr eingeschränkten Zugriff auf die Attribute des Fensters. Siehe "Cross-origin script API access" für Details.

Seiten können diese Eigenschaft auch nutzen, um herauszufinden, welcher iframe eine Nachricht gesendet hat, indem sie es mit der source-Eigenschaft des Message-Events vergleichen, die von Window.postMessage() verwendet wird.

Beispiele

Zugriff auf das Dokument eines iframes

Dieses Beispiel ändert das style-Attribut des Dokumentkörpers.

Beachten Sie, dass dies nur funktioniert, wenn das Fenster des iframes die gleiche Herkunft wie sein übergeordnetes Element hat: andernfalls führt der Versuch, contentWindow.document zu zugreifen, zu einer Ausnahme.

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

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

Zuordnung von Nachrichtenquellen zu iframes

Dieses Beispiel könnte auf einer Seite ausgeführt werden, die mehrere iframes hostet, von denen jedes ihm Nachrichten mit Window.postMessage() senden kann. Wenn die Seite eine Nachricht empfängt, möchte sie wissen, welcher iframe das Fenster enthält, das die Nachricht gesendet hat.

Um dies zu erreichen, überprüft die Seite zuerst, wenn sie eine Nachricht empfängt, dass diese von der erwarteten Herkunft stammt, und findet dann den iframe, der die Quelle der Nachricht war, indem sie die source-Eigenschaft des Message-Events mit der contentWindow-Eigenschaft des iframes vergleicht.

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

Spezifikationen

Specification
HTML
# dom-iframe-contentwindow

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contentWindow

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support