BroadcastChannel : évènement message
L'évènement message
est déclenché sur un objet BroadcastChannel
lorsqu'un message arrive sur le canal.
Syntaxe
Utilisez le nom de l'évènement dans les méthodes telles que addEventListener()
, ou définissez un gestionnaire d'évènements.
addEventListener('message', (event) => { })
onmessage = (event) => { }
Type de l'évènement
Un MessageEvent
. Hérite de l'interface Event
.
Propriété de l'évènement
En plus des propriétés listées ci-dessous, celles provenant de l'interface parente Event
sont disponibles.
- data (en-US) Lecture seule
- : Les données envoyées par l'émetteur du message.
- origin (en-US) Lecture seule
- lastEventId (en-US) Lecture seule
- : Une chaîne représentant l'identifiant unique pour l'évènement.
- source (en-US) Lecture seule
- : Un
MessageEventSource
, qui peut être soit un WindowProxy (en-US), un MessagePort (en-US), ou un objetServiceWorker
représentant l'émetteur du message. - ports (en-US) Lecture seule
- : Un tableau d'objets MessagePort (en-US) représentant les ports associés au canal par lequel le message est envoyé (lorsque c'est approprié, par exemple, dans le canal de communication ou lorsqu'un message est envoyé à un worker partagé).
Exemples
Dans cet exemple, il y a un <iframe>
« émetteur » qui diffuse le contenu du <textarea>
lorsque l'utilisatrice ou l'utilisateur clique sur le bouton. Il y a deux iframe
s « récepteurs » qui écoutent le message diffusé et écrivent le résultat dans un élément <div>
.
Émetteur
const canal = new BroadcastChannel('canal_exemple');
const commandeMessage = document.querySelector('#message');
const boutonDeDiffusion = document.querySelector('#broadcast-message');
boutonDeDiffusion.addEventListener('click', () => {
canal.postMessage(commandeMessage.value);
})
Récepteur 1
const canal = new BroadcastChannel('canal_exemple');
canal.addEventListener('message', (event) => {
recu.textContent = event.data;
});
Récepteur 2
const canal = new BroadcastChannel('canal_exemple');
canal.addEventListener('message', (event) => {
recu.textContent = event.data;
});
Résultat
Spécifications
Specification |
---|
HTML Standard # event-message |
HTML Standard # handler-broadcastchannel-onmessage |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Évènements liés :
messageerror
.