BroadcastChannel: message event

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 auf diesem Kanal eingeht.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignisbehandlereigenschaft.

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

onmessage = (event) => { }

Ereigniseigenschaften

Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften von 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 darstellt.
source Schreibgeschützt: Eine message event source, die entweder ein WindowProxy, ein MessagePort oder ein ServiceWorker-Objekt ist, das den Nachrichtensender darstellt.
ports Schreibgeschützt: Ein Array von MessagePort-Objekten, das die mit dem Kanal verbundenen Ports darstellt, durch den die Nachricht gesendet wird (sofern zutreffend, z. B. bei der Kanalnachrichtenübermittlung oder beim Senden einer Nachricht an einen gemeinsam genutzten Worker).

In diesem Beispiel gibt es einen "Sender" <iframe>, der den Inhalt eines <textarea> sendet, wenn der Benutzer auf einen Knopf klickt. Es gibt zwei "Empfänger"-Iframes, die auf die Broadcast-Nachricht hören 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 # event-message
HTML # handler-broadcastchannel-onmessage

Browser-Kompatibilität

Siehe auch

Verwandte Ereignisse: messageerror.