MessagePort

親である 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 を参照してください (実際のデモも実行できます)。

• Using channel messaging