MessagePort: message イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
メモ: この機能はウェブワーカー内で利用可能です。
message
イベントは MessagePort
オブジェクトで、チャンネル上でメッセージが届いたときに発生します。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener()
のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("message", (event) => {});
onmessage = (event) => {};
イベント型
MessageEvent
です。 Event
を継承しています。
イベントプロパティ
このインターフェイスは親である Event
からプロパティを継承しています。
MessageEvent.data
読取専用-
メッセージ送信元によって送信されたデータです。
MessageEvent.origin
読取専用-
文字列で、メッセージ送信元のオリジンを表します。
MessageEvent.lastEventId
読取専用-
文字列で、このイベントの一意の ID を表します。
MessageEvent.source
読取専用-
メッセージイベントソース、すなわち WindowProxy、
MessagePort
、ServiceWorker
の何れかのオブジェクトで、メッセージの送信元を表します。 MessageEvent.ports
読取専用-
MessagePort
オブジェクトの配列で、メッセージが送信されるチャンネルに関連するポートを表します(チャンネルメッセージングや、共有ワーカーにメッセージを送信する場合など、適切な場合)。
例
MessageChannel
を作成し、そのポートの 1 つを別の閲覧コンテキスト(別の <iframe>
など)に送信するスクリプトを、次のようなコードで作成するとします。
const channel = new MessageChannel();
const myPort = channel.port1;
const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";
const messageControl = document.querySelector("#message");
const channelMessageButton = document.querySelector("#channel-message");
channelMessageButton.addEventListener("click", () => {
myPort.postMessage(messageControl.value);
});
targetFrame.postMessage("init", targetOrigin, [channel.port2]);
対象とするポートを受信し、そのポートでメッセージの待ち受けを開始するには、次のようなコードを使用することができます。
window.addEventListener("message", (event) => {
const myPort = event.ports[0];
myPort.addEventListener("message", (event) => {
received.textContent = event.data;
});
myPort.start();
});
リスナーが MessagePort.start()
を呼び出さなければ、このポートにメッセージが配信されないことに注意してください。これは、addEventListener()
メソッドを使用する場合のみ必要です。受信者が onmessage
を使用する場合は、start()
が暗黙的に呼び出されます。
window.addEventListener("message", (event) => {
const myPort = event.ports[0];
myPort.onmessage = (event) => {
received.textContent = event.data;
};
});
仕様書
Specification |
---|
HTML Standard # event-message |
HTML Standard # handler-messageport-onmessage |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連イベント:
messageerror
- チャンネルメッセージングの使用