DOM

：

：

Window.postMessage() メソッド

　編集：2022.09.12 by T.A.

[Edge]。→、、

Window オブジェクト間で安全にオリジン間通信を可能にするためのメソッドです。例えば、ポップアップとそれを表示したページの間や、iframe とそれが埋め込まれたページの間での通信に使うことができます。

通常、異なった複数のページでのスクリプトはそれらが実行されたページが同じプロトコル、ポート番号、ホストである場合に限りお互いにアクセスすることが可能です（"" とも呼ばれます）。正しく使用した window.postMessage() はこの制限を安全に回避するための制御された仕組みを提供します。

大まかには、ウィンドウが他のウィンドウへの参照を取得できる場合（ targetWindow = window.opener など）、targetWindow.postMessage() を使って MessageEvent をそのウィンドウ上で配信することができます。受け取ったウィンドウでは必要に応じて自由にすることができます。window.postMessage() に渡された引数 ("message") はイベントオブジェクトを通して対象のウィンドウに公開されます。

構文
Window.postMessage(message, targetOrigin[, transfer])
Window Window オブジェクト。
message 他のウィンドウに送られるデータ。データは構造化クローンアルゴリズムに従ってシリアル化されます。つまり、手動でシリアル化することなく様々なデータ オブジェクトを宛先に安全に渡すことができます。
targetOrigin イベントを配信するこのウィンドウのオリジンを指定します。リテラル文字列「*」（優先順位なし）か URI のどちらかで指定します。

イベントが配信される予定時刻に、このウィンドウの文書のスキーム、ホスト名、ポートが targetOrigin で指定されたものと一致しない場合、イベントは配信されません。この仕組みにより、メッセージが送信される場所を制御できます。例えば、postMessage() をパスワードを送信するために使用する場合、悪意のある第三者によるパスワードの傍受を防ぐために、この引数がパスワードを含むメッセージの受信予定者と同じオリジンの URI であることが絶対に重要でしょう。

他のウィンドウの文書がどこにあるものか知っている場合は、「*」ではなく、常に特定の targetOrigin を指定してください。特定のターゲットを指定しないと、悪意のあるサイトに送信したデータが開示されてしまいます。

transfer メッセージと一緒に転送されるのシーケンスです。これらのオブジェクトの所有権は送信先に移動され、送信元では使えなくなります。
戻り値

なし（undefined）。

例
配信されるイベント

window は以下の JavaScript を実行することで、配信されたメッセージを受け取ることができます。 

window.addEventListener("message", (event) => {
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}, false);
配信されたメッセージ

¶受け取ったメッセージ？には、以下のプロパティがあります。

data
他のウィンドウから渡されたメッセージを保持しているオブジェクト。
origin
postMessage が呼び出されたときにメッセージを送るウィンドウのオリジン。この文字列は、プロトコルと "://"、ホスト名（存在する場合）、そして、":" の後に続くポート番号（既定のポートと指定したポートが異なる場合）が連結されたものです。典型的なオリジンの例は https://example.org (この場合のポートは 443)、http://example.net（この場合のポートは 80）、そして http://example.com:8080。このオリジン生成元はそのウィンドウの現在もしくは将来のオリジンであることを保証していないことに注意してください。postMessage が呼び出された時とは異なる場所に移動しているかもしれません。
source
メッセージを送った window オブジェクトへの参照。これを使うことでオリジンの異なる二つのウィンドウ間で双方向の通信を確立することができます。

¶省く

テスト