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.

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

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).

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

<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);
});

Empfänger 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;
});

Empfänger 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;
});

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.