BroadcastChannel: message-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das message-Ereignis der BroadcastChannel-Schnittstelle wird ausgelöst, wenn auf diesem Kanal eine Nachricht eintrifft.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onmessage = (event) => { }

In diesem Beispiel gibt es einen „Sender“-<iframe>, der den Inhalt einer <textarea> sendet, wenn der Benutzer auf eine Schaltfläche klickt. Zwei „Empfänger“-iframes empfangen die gesendete Nachricht und schreiben das Ergebnis in ein <div>-Element.

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

Spezifikation
HTML # event-message
HTML # handler-broadcastchannel-onmessage

Browser-Kompatibilität

Siehe auch

Verwandte Ereignisse: messageerror.

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden