BroadcastChannel: событие message

Базовая версия Широко доступна

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2022 года.

Примечание: Эта функция доступна в Веб-воркерах.

Событие message интерфейса BroadcastChannel срабатывает при получении сообщения на канале.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте обработчик события.

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

Тип события

Объект MessageEvent. Наследуется от Event.

Свойства события

Помимо перечисленных ниже свойств, доступны свойства родительского интерфейса Event.

data Только для чтения: Данные, отправленные источником сообщения.
origin Только для чтения: Строка, представляющая происхождение источника сообщения.
lastEventId Только для чтения: Строка, представляющая уникальный идентификатор события.
source Только для чтения: Источник события сообщения, который может быть объектом WindowProxy, MessagePort или ServiceWorker, представляющим источник сообщения.
ports Только для чтения: Массив объектов MessagePort, представляющих порты, связанные с каналом, по которому отправляется сообщение (если применимо, например, при обмене сообщениями по каналу или при отправке сообщения в общий рабочий процесс).

Примеры

В этом примере есть «отправитель» <iframe>, который транслирует содержимое <textarea> при нажатии пользователем кнопки. Есть два «получателя» iframe, которые слушают транслируемое сообщение и записывают результат в элемент <div>.

Отправитель

const channel = new BroadcastChannel("example-channel");
const messageControl = document.querySelector("#message");
const broadcastMessageButton = document.querySelector("#broadcast-message");

broadcastMessageButton.addEventListener("click", () => {
  channel.postMessage(messageControl.value);
});

Получатель 1

const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

Получатель 2

const channel = new BroadcastChannel("example-channel");
channel.addEventListener("message", (event) => {
  received.textContent = event.data;
});

Результат

Спецификации

Спецификация
HTML # event-message
HTML # handler-broadcastchannel-onmessage

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`message_event`	54	79	38	41	15.4	54	38	41	15.4	6.0	54

См. также

Связанные события: messageerror.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel/message_event