DiecontentWindow-Eigenschaft gibt dasWindow-Objekt einesHTMLIFrameElement zurück.

Dieses Attribut ist schreibgeschützt.

Wert

EinWindow-Objekt.

Beschreibung

Der Zugriff auf das voncontentWindow zurückgegebeneWindow unterliegt den Regeln derSame-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 mitWindow.postMessage() gesendet hat, indem sie es mit dersource-Eigenschaft des Nachrichtenereignisses vergleichen.

Beispiele

Zugriff auf das Dokument eines iframes

Dieses Beispiel ändert dasstyle-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, aufcontentWindow.document zuzugreifen, zu einer Ausnahme.

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 mitWindow.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 diesource-Eigenschaft des Nachrichtenereignisses mit dercontentWindow-Eigenschaft des iframes vergleicht.

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

Browser-Kompatibilität