BroadcastChannel: message イベント

ジャンプ先:
  1. 例
  2. 仕様
  3. ブラウザーの互換性
  4. 関連情報

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 現行の標準

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
message eventChrome 完全対応 54Edge ? Firefox 完全対応 38IE 未対応 なしOpera 完全対応 41Safari 未対応 なしWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android ? Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: Wind1808
最終更新者: Wind1808,