MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

MessagePort

Channel Messaging APIMessagePort インターフェースは、MessageChannel の 2 つのポートの一方を表し、片方のポートから送信されるメッセージをもう片方のポートで受信待機できます。

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

メソッド

親である EventTarget からのメソッドを継承します。

MessagePort.postMessage
ポートからメッセージを送信します。また、任意でオブジェクトの所有権を他のブラウジングコンテキストへ転送します。
MessagePort.start
ポート上で順番待ちのメッセージの送信を開始します。(EventTarget.addEventListener を使用する場合のみ必要。これは、MessagePort.onmessage を使用する場合を含みます)
MessagePort.close
ポートとの接続を切断し、このポートはアクティブではなくなります。

イベントハンドラ

親である EventTarget からのイベントハンドラを継承します。

MessagePort.onmessage
これは、message 型の MessageEvent がポート上で発動した時に呼び出される EventListener です。つまり、ポートがメッセージを受信した時に呼び出されます。

次のコードブロックには、MessageChannel.MessageChannel コンストラクタで作成された新しいチャンネルがあります。<iframe> が読み込まれると、MessagePort.postMessage メソッドによってメッセージと MessageChannel.port2<iframe> へ渡されます。すると、handleMessage ハンドラが onmessage によって <iframe> から返されたメッセージに応答し、そのメッセージを段落に出力します。

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 上の channel messaging basic demo を参照してください (実際のデモも実行できます)。

仕様

仕様書 策定状況 備考
WHATWG HTML Living Standard
MessagePort の定義
現行の標準 HTML5 Web Messaging との差異なし。
HTML5 Web Messaging
MessagePort の定義
勧告 仕様の 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 内で利用可能 Available in workers (有) (有) 41.0 (41) (有) (有) (有) (有)

関連情報

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

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