MessageChannel
Channel Messaging API の MessageChannel
インターフェースは、新しいメッセージチャンネルを作成し、2 つの MessagePort
プロパティを通して、その間でデータを送信できます。
注: この機能は Web Worker 内で利用可能です
プロパティ
MessageChannel.port1
読取専用-
チャンネルの port1 を返します。
MessageChannel.port2
読取専用-
チャンネルの port2 を返します。
コンストラクタ
MessageChannel()
-
2 つの新しい
MessagePort
オブジェクトを持つ 新しいMessageChannel
オブジェクトを返します。
例
次のコードブロックでは、MessageChannel.MessageChannel
コンストラクタを使用して作成された新しいチャンネルを知ることができます。<iframe>
が読み込まれると、MessagePort.postMessage
にメッセージを添えて MessageChannel.port2
を <iframe>
へ渡します。すると、handleMessage
ハンドラが <iframe>
から返送されたメッセージに (MessagePort.onmessage
を使用して) 返答し、これを段落に挿入します。
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 を参照してください (実際のデモも実行できます)。
仕様
Specification |
---|
HTML Standard # message-channels |
ブラウザの実装状況
BCD tables only load in the browser