HTMLIFrameElement: contentWindow-Eigenschaft

Ein Window-Objekt.

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.

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.

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

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

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.

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