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

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 darstellt.
source Schreibgeschützt: Eine Message-Event-Quelle, die entweder ein WindowProxy, ein MessagePort oder ein ServiceWorker-Objekt darstellt, das den Nachrichtensender repräsentiert.
ports Schreibgeschützt: Ein Array von MessagePort-Objekten, die die Ports darstellen, die mit dem Kanal assoziiert sind, durch den die Nachricht gesendet wird (sofern zutreffend, z. B. beim Kanal-Messaging oder beim Senden einer Nachricht an einen geteilten Worker).

In diesem Beispiel gibt es einen "Sender" <iframe>, der den Inhalt einer <textarea> sendet, wenn der Benutzer auf einen Button klickt. Es gibt zwei "Empfänger"-Iframes, die auf die gesendete Nachricht lauschen 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.