MessagePort
インターフェイスの postMessage()
メソッドは、ポートからのメッセージを送信します。任意で、オブジェクトの所有権を他のブラウザコンテキストへ転送します。
註: この機能は Web Workers 内で利用可能です。
構文
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 上の チャンネルメッセージ送信の基本デモ を見てください (実際の動作も確認できます)。
仕様
仕様書 | 策定状況 | 備考 |
---|---|---|
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) | (有) | (有) | (有) | (有) |