MessagePort

Channel Messaging APIMessagePort インターフェースは、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.port1onmessage ハンドラーを登録し、メッセージと共に 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 Living Standard
Message ports の定義
現行の標準  

ブラウザの実装状況

BCD tables only load in the browser

関連情報