HTMLIFrameElement : propriété contentWindow

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

La propriété contentWindow retourne l'objet Window d'un élément HTML <iframe>.

Cet attribut est en lecture seule.

L'accès à Window retourné par contentWindow est soumis aux règles définies par la politique de même origine, ce qui signifie que si le cadre intégré (iframe en anglais) est de même origine que le parent, alors le parent peut accéder au document du cadre intégré et à son DOM interne, et s'ils sont d'origines différentes, il obtient un accès très limité aux attributs de la fenêtre. Voir Accès API script inter-origine pour plus de détails.

Les pages peuvent aussi utiliser cette propriété pour savoir quel cadre intégré a envoyé un message avec Window.postMessage(), en la comparant à la propriété source de l'évènement message.

Exemples

Accéder au document d'un cadre intégré

Cet exemple modifie l'attribut style du corps du document.

Notez que cela ne fonctionne que si la fenêtre du cadre intégré (iframe en anglais) est de même origine que son parent : sinon, toute tentative d'accès à contentWindow.document lèvera une exception.

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

iframe.document.querySelector("body").style.backgroundColor = "blue";
// ceci devrait changer le 1er iframe dans le document bleu.

Associer la source d'un message à un cadre intégré

Cet exemple peut s'exécuter dans une page qui héberge plusieurs cadres intégrés (iframe en anglais), dont chacun peut lui envoyer des messages via Window.postMessage(). Lorsque la page reçoit un message, elle souhaite savoir quel cadre intégré contient la fenêtre qui a envoyé le message.

Pour cela, lorsqu'elle reçoit un message, la page vérifie d'abord que le message provient de l'origine attendue, puis trouve le cadre intégré qui est la source du message en comparant la propriété source de l'évènement message avec la propriété contentWindow du cadre intégré.

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