BroadcastChannel: message イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

message イベントは、メッセージがそのチャンネルに到着したときに BroadcastChannel オブジェクト上で発生します。

構文

このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("message", (event) => { })
onmessage = (event) => { }

イベント型

MessageEvent です。 Event を継承しています。

Event MessageEvent

イベントプロパティ

このインターフェイスは親である Event からプロパティを継承しています。

MessageEvent.data 読取専用

メッセージ送信元によって送信されたデータです。

MessageEvent.origin 読取専用

文字列で、メッセージ送信元のオリジンを表します。

MessageEvent.lastEventId 読取専用

文字列で、このイベントの一意の ID を表します。

MessageEvent.source 読取専用

メッセージイベントソース、すなわち WindowProxyMessagePortServiceWorker の何れかのオブジェクトで、メッセージの送信元を表します。

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
# event-message
HTML
# handler-broadcastchannel-onmessage

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
message event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
User must explicitly enable this feature.

関連情報