window.postMessage() メソッド

導入

window.postMessage() は、主に iframe 埋め込みウィンドウや新しく開かれたウィンドウなど、異なるブラウザウィンドウ間の通信に使用されます。 2 つのウィンドウの原点が同じである必要がないため、幅広い用途に使用できます。

window.postMessage() の window オブジェクトは、メッセージを送信するためのターゲットウィンドウです。たとえば、親ウィンドウが window.open() を通じて子ウィンドウを開く場合、子ウィンドウは targetWindow = window.opener を通じて親ウィンドウを取得できます。別の例として、親ウィンドウが「iframe」を通じて子ウィンドウを埋め込む場合、子ウィンドウは「window.parent」を通じて親ウィンドウを取得できます。

パラメータと戻り値

window.postMessage() メソッドにはいくつかの使用形式があります。

最も簡単な方法はダイレクトメッセージを送信することです。

window.postMessage(メッセージ)

上記の書き込みメソッドの「メッセージ」は送信されるメッセージであり、文字列またはオブジェクトにすることができます。それがオブジェクトの場合、ブラウザは自動的にオブジェクトをシリアル化し、文字列として送信します。

window.postMessage() は任意の 2 つのソース (プロトコル + ドメイン名 + ポート) 間の通信に使用できるため、セキュリティリスクを軽減するために、2 番目のパラメーター targetOrigin を使用してターゲットウィンドウのソースを指定できます。。

window.postMessage(メッセージ, targetOrigin)

上記の記述方法における「targetOrigin」は、「https://example.com」など、ターゲットウィンドウ内のWebページの起点を表す文字列です。対象ウィンドウに制限がない場合は、このパラメータを省略するか、`*` として記述することができます。このパラメータを指定すると、ターゲットウィンドウが指定されたソース (プロトコル + ドメイン名 + ポート) に準拠している場合にのみ、ターゲットウィンドウはメッセージ送信イベントを受信します。

window.postMessage() は、ArrayBuffer オブジェクトなどの転送可能なオブジェクトを送信するための 3 番目のパラメータを指定することもできます。

window.postMessage(メッセージ、ターゲットオリジン、転送)

上記の文中の「譲渡」とは譲渡可能な対象のことです。オブジェクトが送信されると、所有権はターゲットウィンドウに転送され、現在のウィンドウはそのオブジェクトを使用できなくなります。大量のデータを送信する際の効率を向上させるための設計です。

2 つのパラメータ targetOrigin と transfer を 2 番目のパラメータとしてオブジェクトに記述することもできます。

window.postMessage(メッセージ, { targetOrigin, transfer })

以下は、ポップアップウィンドウにメッセージを送信する例です。

const Popup = window.open('http://example.com');
Popup.postMessage("こんにちは!", "http://example.com");

window.postMessage() メソッドには戻り値がありません。

メッセージイベント

メッセージイベントは、現在のウィンドウが別のウィンドウから送信されたメッセージを受信したときに発生します。このイベントを聞くことで、相手から送られてきたメッセージを受信することができます。

window.addEventListener(
  "メッセージ"、
  (イベント) => {
    if (event.origin !== "http://example.com") return;
    // ...
  }、
  間違い、
);

イベントリスニング関数はイベントパラメータオブジェクトを受け取ることができます。このオブジェクトには次のプロパティがあります。

data: 他のウィンドウから送信されたメッセージ。
送信元: メッセージを送信したウィンドウのソース (プロトコル + ドメイン名 + ポート)。
source: メッセージを送信したウィンドウオブジェクトへの参照。この属性を使用して双方向通信を確立します。以下に例を示します。

window.addEventListener("メッセージ", (イベント) => {
  if (event.origin !== "http://example.com:8080") return;
  イベント.ソース.postMessage(
    "やあ！"、
    イベント.オリジン、
  );
});

例

親ページは origin1.com で、子ページ origin2.com が開き、そこにメッセージが送信されます。

関数 sendMessage() {
  const otherWindow = window.open('https://origin2.com/origin2.html');
  const message = 'Origin 1 からこんにちは!';
  const targetOrigin = 'https://origin2.com';
  otherWindow.postMessage(メッセージ, targetOrigin);
}

子ページ「origin2.com」は、親ページから送信されたメッセージをリッスンします。

window.addEventListener('メッセージ'、receiveMessage、false);

関数受信メッセージ(イベント) {
  if (event.origin === 'https://origin1.com') {
    console.log('受信したメッセージ: ' +event.data);
  }
}

以下は、親ウィンドウ「origin1.com」にメッセージを送信する iframe 埋め込みウィンドウの例です。

関数 sendMessage() {
  const message = '子ウィンドウからこんにちは!';
  window.parent.postMessage(メッセージ, 'https://origin1.com');
}