このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
BroadcastChannel: message イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2022年3月以降、すべてのブラウザーで利用可能です。
メモ: この機能はウェブワーカー内で利用可能です。
message は BroadcastChannel インターフェイスのイベントで、メッセージがそのチャンネルに到着したときに発生します。
構文
このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("message", (event) => { })
onmessage = (event) => { }
イベント型
MessageEvent です。 Event を継承しています。
イベントプロパティ
このインターフェイスは親である Event からプロパティを継承しています。
MessageEvent.data読取専用-
メッセージ送信元によって送信されたデータです。
MessageEvent.origin読取専用-
文字列で、メッセージ送信元のオリジンを表します。
MessageEvent.lastEventId読取専用-
文字列で、このイベントの一意の ID を表します。
MessageEvent.source読取専用-
メッセージイベントソース、すなわち WindowProxy、
MessagePort、ServiceWorkerの何れかのオブジェクトで、メッセージの送信元を表します。 MessageEvent.ports読取専用-
MessagePortオブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します(チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合)。
例
この例では "Sender" の <iframe> があり、ユーザーがボタンをクリックしたときに <textarea> の内容を配信します。 "Receiver" の iframe は 2 つあり、ブロードキャストメッセージを受信し、その結果を <div> 要素に書き込みます。
Sender
<h1>Sender</h1>
<label for="message">Type a message to broadcast:</label><br />
<textarea id="message" name="message" rows="1" cols="40">Hello</textarea>
<button id="broadcast-message" type="button">Broadcast message</button>
body {
border: 1px solid black;
padding: 0.5rem;
height: 150px;
font-family: "Fira Sans", sans-serif;
}
h1 {
font:
1.6em "Fira Sans",
sans-serif;
margin-bottom: 1rem;
}
textarea {
padding: 0.2rem;
}
label,
br {
margin: 0.5rem 0;
}
button {
vertical-align: top;
height: 1.5rem;
}
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
<h1>Receiver 1</h1>
<div id="received"></div>
body {
border: 1px solid black;
padding: 0.5rem;
height: 100px;
font-family: "Fira Sans", sans-serif;
}
h1 {
font:
1.6em "Fira Sans",
sans-serif;
margin-bottom: 1rem;
}
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
received.textContent = event.data;
});
Receiver 2
<h1>Receiver 2</h1>
<div id="received"></div>
body {
border: 1px solid black;
padding: 0.5rem;
height: 100px;
font-family: "Fira Sans", sans-serif;
}
h1 {
font:
1.6em "Fira Sans",
sans-serif;
margin-bottom: 1rem;
}
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
received.textContent = event.data;
});
結果
仕様書
| 仕様書 |
|---|
| HTML # event-message |
| HTML # handler-broadcastchannel-onmessage |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
関連情報
- 関連イベント:
messageerror