HTMLIFrameElement: свойство contentWindow

Свойство contentWindow возвращает объект Window элемента HTMLIFrameElement.

Это свойство является только для чтения.

Объект Window.

Доступ к объекту Window, возвращаемому contentWindow, регулируется правилами, определенными политикой одинакового происхождения. Если iframe и родительский элемент находятся на одном домене, родительский элемент может получить доступ к документу iframe и его внутреннему DOM. В случае разных доменов доступ к атрибутам окна будет очень ограничен. Подробности см. в разделе "Доступ к API скрипта с разных доменов".

Страницы также могут использовать это свойство для определения iframe, который отправил сообщение с помощью Window.postMessage(), сравнивая его со свойством source события message.

В этом примере изменяется атрибут style тела документа.

Обратите внимание, что это работает только в том случае, если окно iframe находится на том же домене, что и родительский элемент: в противном случае попытка доступа к contentWindow.document вызовет исключение.

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

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

Этот пример может выполняться на странице, содержащей несколько iframe, любой из которых может отправлять ей сообщения с помощью Window.postMessage(). Когда страница получает сообщение, она хочет узнать, какой iframe содержит окно, отправившее это сообщение.

Для этого, получив сообщение, страница сначала проверяет, что оно пришло с ожидаемого домена, а затем находит iframe, являющийся источником сообщения, сравнивая свойство source события message со свойством contentWindow iframe.

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