MessageChannel
メモ: この機能はウェブワーカー内で利用可能です。
MessageChannel
はチャンネルメッセージング API のインターフェイスで、新しいメッセージチャンネルを作成し、2 つの MessagePort
プロパティを通して、その間でデータを送信できます。
コンストラクター
MessageChannel()
-
2 つの新しい
MessagePort
オブジェクトを持つ新しいMessageChannel
オブジェクトを返します。
プロパティ
MessageChannel.port1
読取専用-
チャンネルの port1 を返します。
MessageChannel.port2
読取専用-
チャンネルの port2 を返します。
例
次の例では、MessageChannel()
コンストラクターを使用して新しいチャンネルを作成する様子を見ることができます。
iframe が読み込まれると、onmessage
ハンドラーを MessageChannel.port1
に登録し、MessageChannel.port2
を window.postMessage
メソッドを使用して iframe へ転送します。
IFrame からメッセージが返送されると、onMessage
関数はそのメッセージを段落に出力します。
js
const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");
// iframe が読み込まれるのを待つ
iframe.addEventListener("load", onLoad);
function onLoad() {
// port1 のメッセージを待ち受けする
channel.port1.onmessage = onMessage;
// port2 を iframe へ転送する
iframe.contentWindow.postMessage("メインページからこんにちは!", "*", [
channel.port2,
]);
}
// port1 で受け取ったメッセージを処理する
function onMessage(e) {
output.innerHTML = e.data;
}
完全に動作する例は、Github 上の channel messaging basic demo を参照してください (実際のデモも実行できます)。
仕様書
Specification |
---|
HTML Standard # message-channels |
ブラウザーの互換性
BCD tables only load in the browser