MessagePort: message event
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2015 browserübergreifend verfügbar.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Das message-Ereignis wird auf einem MessagePort-Objekt ausgelöst, wenn eine Nachricht auf diesem Kanal ankommt.
Dieses Ereignis ist nicht abbrechbar und löst sich nicht auf.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("message", (event) => { })
onmessage = (event) => { }
Ereignistyp
Ein MessageEvent. Erbt von Event.
Beispiele
Angenommen, ein Skript erstellt einen MessageChannel und sendet einen der Ports an einen anderen Browsing-Kontext, wie z.B. ein anderes <iframe>, mit einem Code wie diesem:
const channel = new MessageChannel();
const myPort = channel.port1;
const targetFrame = window.top.frames[1];
const targetOrigin = "https://example.org";
const messageControl = document.querySelector("#message");
const channelMessageButton = document.querySelector("#channel-message");
channelMessageButton.addEventListener("click", () => {
myPort.postMessage(messageControl.value);
});
targetFrame.postMessage("init", targetOrigin, [channel.port2]);
Das Ziel kann den Port empfangen und beginnen, für Nachrichten und Nachrichtenfehler darauf zu lauschen, mit einem Code wie diesem:
window.addEventListener("message", (event) => {
const myPort = event.ports[0];
myPort.addEventListener("message", (event) => {
received.textContent = event.data;
});
myPort.addEventListener("messageerror", (event) => {
console.error(event.data);
});
myPort.start();
});
Beachten Sie, dass der Listener MessagePort.start() aufrufen muss, bevor irgendwelche Nachrichten an diesen Port geliefert werden. Dies ist nur erforderlich, wenn die addEventListener()-Methode verwendet wird: Wenn der Empfänger stattdessen onmessage verwendet, wird start() implizit aufgerufen:
window.addEventListener("message", (event) => {
const myPort = event.ports[0];
myPort.onmessage = (event) => {
received.textContent = event.data;
};
myPort.onmessageerror = (event) => {
console.error(event.data);
};
});
Spezifikationen
| Spezifikation |
|---|
| HTML # event-message |
| HTML # handler-messageeventtarget-onmessage |
Browser-Kompatibilität
Siehe auch
- Verwandte Ereignisse:
messageerror. - Verwendung von Channel Messaging