MessagePort
Channel Messaging API の MessagePort
インターフェースは、MessageChannel
の 2 つのポートの一方を表し、片方のポートから送信されるメッセージをもう片方のポートで受信待機できます。
注: この機能は Web Worker 内で利用可能です
メソッド
親である EventTarget
からのメソッドを継承します。
MessagePort.postMessage
-
ポートからメッセージを送信します。また、任意でオブジェクトの所有権を他のブラウジングコンテキストへ転送します。
MessagePort.start
-
ポート上で順番待ちのメッセージの送信を開始します。(
EventTarget.addEventListener
を使用する場合のみ必要。これは、MessagePort.onmessage
を使用する場合を含みます) MessagePort.close
-
ポートとの接続を切断し、このポートはアクティブではなくなります。
イベントハンドラ
親である EventTarget
からのイベントハンドラを継承します。
MessagePort.onmessage
-
これは、
message
型のMessageEvent
がポート上で発動した時に呼び出されるEventListener
です。つまり、ポートがメッセージを受信した時に呼び出されます。 MessagePort.onmessageerror
-
ポートで
messageerror
型のMessageEvent
が発火すると呼び出されます。つまり、デシリアライズできないメッセージを受け取ったときです。
例
次のコードブロックには、MessageChannel.MessageChannel
コンストラクタで作成された新しいチャンネルがあります。
Iframe が読み込まれると、MessageChannel.port1
に onmessage
ハンドラーを登録し、メッセージと共に window.postMessage
を使用して IFrame に MessageChannel.port2
を送信します。
IFrame からメッセージが返却されると。onMessage
関数でメッセージをパラグラフに出力します。
var channel = new MessageChannel(); var output = document.querySelector('.output'); var iframe = document.querySelector('iframe'); // Wait for the iframe to load iframe.addEventListener("load", onLoad); function onLoad() { // Listen for messages on port1 channel.port1.onmessage = onMessage; // Transfer port2 to the iframe iframe.contentWindow.postMessage('Hello from the main page!', '*', [channel.port2]); } // Handle messages received on port1 function onMessage(e) { output.innerHTML = e.data; }
完全に動作する例は、Github 上の channel messaging basic demo を参照してください (実際のデモも実行できます)。
仕様
Specification |
---|
HTML Standard # message-ports |
ブラウザの実装状況
BCD tables only load in the browser