MessagePort.postMessage()

MessagePort インターフェイスの postMessage() メソッドは、ポートからのメッセージを送信します。任意で、オブジェクトの所有権を他のブラウザコンテキストへ転送します。

註: この機能は Web Workers 内で利用可能です。

構文

port.postMessage(message [,transfer]);

戻り値

無効。

引数

message
チャンネル経由で送信するメッセージ。これは基本データタイプになります。複数のデータアイテムを配列として送信できます。
[, transfer]
(任意) 転送されるオブジェクト。これらのオブジェクトの所有権は、受信側のブラウザコンテキストへ転送されるため、送信側のブラウザコンテキストでは使用できなくなります。

次のコードブロックでは、MessageChannel.MessageChannel コンストラクタで新しいチャンネルを作成しています。IFrame が読み込まれた時、window.postMessage メソッドによってメッセージと MessageChannel.port2 が IFrame へ渡されます。すると、handleMessageonmessage によって 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 上の チャンネルメッセージ送信の基本デモ を見てください (実際の動作も確認できます)。

仕様

仕様書 策定状況 備考
WHATWG HTML Living Standard
postMessage() の定義
現行の標準 HTML5 Web Messaging との差異なし。
HTML5 Web Messaging
postMessage() の定義
勧告 仕様の W3C バージョン。

ブラウザの実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 4 未サポート 10.0 10.6 5
Worker 内で利用可能 (有) 41 (41) (有) (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 4.4 4 未サポート 未サポート 10.0 11.5 5.1
Worker 内で利用可能 (有) (有) 41.0 (41) (有) (有) (有) (有)

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Marsf
 最終更新者: Marsf,