HTMLIFrameElement: contentWindow-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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

Dieses Attribut ist schreibgeschützt.

In diesem Artikel

Der Zugriff auf das von contentWindow zurückgegebene Window unterliegt den Regeln der Same-Origin-Policy. Das bedeutet, wenn das iframe dieselbe Herkunft wie das übergeordnete Element hat, kann das übergeordnete Element auf das Dokument des iframes und dessen internes DOM zugreifen. Wenn sie unterschiedlich sind (cross-origin), ist der Zugriff auf die Attribute des Fensters sehr eingeschränkt. Siehe "Cross-Origin Script API Access" für Details.

Seiten können diese Eigenschaft auch verwenden, um festzustellen, welches iframe eine Nachricht mit Window.postMessage() gesendet hat, indem sie es mit der source-Eigenschaft des Nachrichtenereignisses vergleichen.

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 dieselbe Herkunft wie sein übergeordnetes Element hat: Andernfalls führt der Versuch, auf contentWindow.document zuzugreifen, 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 laufen, die mehrere iframes hostet, von denen jedes mit Window.postMessage() Nachrichten senden kann. Wenn die Seite eine Nachricht erhält, möchte sie wissen, welches iframe das Fenster enthält, das die Nachricht gesendet hat.

Dazu überprüft die Seite zunächst, wenn sie eine Nachricht erhält, ob die Nachricht von der erwarteten Herkunft stammt. Dann findet sie das iframe, das die Quelle der Nachricht war, indem sie die source-Eigenschaft des Nachrichtenereignisses 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);
});