BroadcastChannel: message イベント

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

バブリング なし
キャンセル 不可
インターフェイス MessageEvent
イベントハンドラプロパティ onmessage

例

実例

この例では、ユーザーがボタンをクリックしたときに <textarea> の内容を放送する "Sender" の <iframe> と、放送メッセージを受信し、その結果を <div> 要素に書き込む2つの "Receiver" の <iframe> があります。

Sender

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

const channel = new BroadcastChannel('example-channel');
channel.addEventListener('message', (event) => {
  received.textContent = event.data;
});

Receiver 2

const channel = new BroadcastChannel('example-channel');
channel.addEventListener('message', (event) => {
  received.textContent = event.data;
});

結果

仕様

仕様 状態
HTML Living Standard 現行の標準

ブラウザーの互換性

BCD tables only load in the browser

関連情報