DOM

：

インターフェイス

：

MessagePort インターフェイス

　 編集：2022.04.03 by T.A.

→●、MS

Channel Messaging API の MessagePort インターフェースは、MessageChannel の 2 つのポートの一方を表し、片方のポートから送信されるメッセージをもう片方のポートで受信待機できます。

注： この機能は Web Worker 内で利用可能です

メソッド

親である EventTarget からのメソッドを継承します。

MessagePort.postMessage ● ●
ポートからメッセージを送信します。また、任意でオブジェクトの所有権を他のブラウジング コンテキストへ転送します。
MessagePort.start ●
ポート上で順番待ちのメッセージの送信を開始します。（EventTarget.addEventListener を使用する場合のみ必要。これは、MessagePort.onmessage を使用する場合を含みます）
MessagePort.close ●
ポートとの接続を切断し、このポートはアクティブではなくなります。
イベントハンドラー

親である EventTarget からのイベントハンドラーを継承します。

MessagePort.onmessage
これは、message 型の MessageEvent がポート上で発動した時に呼び出される EventListener です。つまり、ポートがメッセージを受信した時に呼び出されます。
MessagePort.onmessageerror
ポートで messageerror 型の MessageEvent が発火すると呼び出されます。つまり、デシリアライズできないメッセージを受け取ったときです。
例
次のコードブロックには、MessageChannel.MessageChannel コンストラクターで作成された新しいチャンネルがあります。

Iframe が読み込まれると、MessageChannel.port1 に onmessage ハンドラーを登録し、メッセージと共に window.postMessage を使用して IFrame に MessageChannel.port2 を送信します。

IFrame からメッセージが返却されると。onMessage 関数でメッセージをパラグラフに出力します。 

var channel = new MessageChannel();
var output = document.querySelector('.output');
var iframe = document.querySelector('iframe');

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;

  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}


// Handle messages received on port1
function onMessage(e) {
  output.innerHTML = e.data;
}

完全に動作する例は、Github 上の channel messaging basic demo を参照してください（実際のデモも実行できます）。

テスト
HTML：

ここに表示
スクリプト組み込み：



スクリプト：


スクリプト：



表示内容：
表示内容：