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.
addEventListener("message", (event) => { })
onmessage = (event) => { }
Ereignistyp
Ein MessageEvent
. Erbt von Event
.
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 einServiceWorker
-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
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
const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
received.textContent = event.data;
});
Empfänger 2
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
- Verwandte Ereignisse:
messageerror
.