We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

仕様

仕様書 策定状況 備考
HTML Living Standard
MessagePort の定義
現行の標準 Unknown との差異なし。
Unknown
MessagePort の定義
不明 仕様の W3C バージョン。

ブラウザの実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,