BroadcastChannel: message イベント
message
イベントは、メッセージがそのチャンネルに到着したときに BroadcastChannel
オブジェクト上で発生します。
構文
このイベント名を addEventListener()
のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("message", (event) => { })
onmessage = (event) => { }
イベント型
MessageEvent
です。 Event
を継承しています。
イベントプロパティ
このインターフェイスは親である Event
からプロパティを継承しています。
MessageEvent.data
読取専用-
メッセージ送信元によって送信されたデータです。
MessageEvent.origin
読取専用-
文字列で、メッセージ送信元のオリジンを表します。
MessageEvent.lastEventId
読取専用-
文字列で、このイベントの一意の ID を表します。
MessageEvent.source
読取専用-
メッセージイベントソース、すなわち WindowProxy、
MessagePort
、ServiceWorker
の何れかのオブジェクトで、メッセージの送信元を表します。 MessageEvent.ports
読取専用-
MessagePort
オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します(チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合)。
例
この例では "Sender" の <iframe>
があり、ユーザーがボタンをクリックしたときに <textarea>
の内容を配信します。 "Receiver" の iframe は 2 つあり、ブロードキャストメッセージを受信し、その結果を <div>
要素に書き込みます。
Sender
js
const channel = new BroadcastChannel("example-channel");
const messageControl = document.querySelector("#message");
const broadcastMessageButton = document.querySelector("#broadcast-message");
broadcastMessageButton.addEventListener("click", () => {
channel.postMessage(messageControl.value);
});
Receiver 1
js
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
received.textContent = event.data;
});
Receiver 2
js
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
received.textContent = event.data;
});
結果
仕様書
Specification |
---|
HTML Standard # event-message |
HTML Standard # handler-broadcastchannel-onmessage |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連イベント:
messageerror