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
関連情報
- 関連イベント:
messageerror。