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: Dieses Feature ist verfügbar in Web Workers.

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 Nur lesbar

Die vom Nachrichtensender gesendeten Daten.

origin Nur lesbar

Ein String, der den Ursprung des Nachrichtensenders darstellt.

lastEventId Nur lesbar

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

source Nur lesbar

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

ports Nur lesbar

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 Standard
# event-message
HTML Standard
# handler-broadcastchannel-onmessage

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch