MessagePort.postMessage()

port.postMessage(message [,transfer]);

無効。

message

チャンネル経由で送信するメッセージ。これは基本データタイプになります。複数のデータアイテムを配列として送信できます。

[, transfer]

(任意) 転送されるオブジェクト。これらのオブジェクトの所有権は、受信側のブラウザコンテキストへ転送されるため、送信側のブラウザコンテキストでは使用できなくなります。

次のコードブロックでは、MessageChannel.MessageChannel コンストラクタで新しいチャンネルを作成しています。IFrame が読み込まれた時、window.postMessage メソッドによってメッセージと MessageChannel.port2 が IFrame へ渡されます。すると、handleMessage が onmessage によって IFrame から返されたメッセージに応答し、そのメッセージを段落に出力します。ここで、MessageChannel.port1 は、メッセージが到着したときに確認するための待機状態にあります。

var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}

完全に動作する例は、Github 上の チャンネルメッセージ送信の基本デモ を見てください (実際の動作も確認できます)。

• Using channel messaging