MessagePort

インスタンスメソッド

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

postMessage()

ポートからメッセージを送信します。また、任意でオブジェクトの所有権を他の閲覧コンテキストへ転送します。

start()

ポート上で順番待ちのメッセージの送信を開始します。(EventTarget.addEventListener を使用する場合のみ必要です。onmessage を使用する場合は暗黙に実行されます。)

close()

ポートとの接続を切断し、このポートはアクティブではなくなります。

イベント

親である EventTarget から継承したイベントがあります。

message

MessagePort オブジェクトがメッセージを受信したときに発行されます。

messageerror

MessagePort オブジェクトがデシリアライズできないメッセージを受け取ったときに発行されます。

例

次の例では、MessageChannel() コンストラクターで作成された新しいチャンネルがあります。

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

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

const channel = new MessageChannel();
const output = document.querySelector(".output");
const 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 を参照してください (実際のデモも実行できます)。

仕様書

ブラウザーの互換性

関連情報

• チャンネルメッセージングの使用