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
。