BroadcastChannel: message-Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das message-Ereignis der BroadcastChannel-Schnittstelle wird ausgelöst, wenn eine Nachricht in diesem Kanal ankommt.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

js
addEventListener("message", (event) => { })
onmessage = (event) => { }

Ereignistyp

Ereigniseigenschaften

Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften der übergeordneten Schnittstelle Event verfügbar.

data Schreibgeschützt

Die vom Nachrichtensender gesendeten Daten.

origin Schreibgeschützt

Ein String, der den Ursprung des Nachrichtensenders darstellt.

lastEventId Schreibgeschützt

Ein String, der eine eindeutige ID für das Ereignis repräsentiert.

source Schreibgeschützt

Eine message event source, die entweder ein WindowProxy, ein MessagePort oder ein ServiceWorker-Objekt ist, das den Nachrichtensender repräsentiert.

ports Schreibgeschützt

Ein Array von MessagePort-Objekten, die die Ports darstellen, die mit dem Kanal verbunden sind, über den die Nachricht gesendet wird (wo zutreffend, z.B. bei der Kanalnachrichtenübermittlung oder beim Senden einer Nachricht an einen Shared Worker).

Beispiele

In diesem Beispiel gibt es einen "Sender" <iframe>, der den Inhalt einer <textarea> überträgt, wenn der Benutzer auf eine Schaltfläche klickt. Es gibt zwei "Empfänger"-Iframes, die die gesendete Nachricht empfangen und das Ergebnis in ein <div>-Element schreiben.

Sender

js
const channel = new BroadcastChannel("example-channel");
const messageControl = document.querySelector("#message");
const broadcastMessageButton = document.querySelector("#broadcast-message");

broadcastMessageButton.addEventListener("click", () => {
  channel.postMessage(messageControl.value);
});

Empfänger 1

js
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

Empfänger 2

js
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

Ergebnis

Spezifikationen

Specification
HTML
# event-message
HTML
# handler-broadcastchannel-onmessage

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
message event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
User must explicitly enable this feature.

Siehe auch