MessagePort: событие message

Событие message срабатывает на объекте MessagePort, когда на этом канале появляется сообщение.

Это событие не может быть отменено и не распространяется.

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

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

onmessage = (event) => {};

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

Этот интерфейс также наследует свойства от своего родителя, Event.

MessageEvent.data Только для чтения

Данные, отправленные отправителем сообщения.

MessageEvent.origin Только для чтения

Строка, представляющая источник отправителя сообщения.

MessageEvent.lastEventId Только для чтения

Строка, представляющая уникальный идентификатор события.

MessageEvent.source Только для чтения

Объект MessageEventSource (который может быть WindowProxy, MessagePort или ServiceWorker) представляющий отправителя сообщения.

MessageEvent.ports Только для чтения

Массив, содержащий все объекты MessagePort, отправленные вместе с сообщением, в порядке.

Предположим, что скрипт создаёт MessageChannel и отправляет один из портов в другой контекст просмотра, например, в другой <iframe>, используя код такого типа:

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]);

Целевой объект может принять порт и начать прослушивание сообщений на нём, используя код такого типа:

window.addEventListener("message", (event) => {
  const myPort = event.ports[0];

  myPort.addEventListener("message", (event) => {
    received.textContent = event.data;
  });

  myPort.start();
});

Обратите внимание, что слушатель должен вызвать MessagePort.start() прежде чем любые сообщения будут доставлены в этот порт. Это необходимо только при использовании метода addEventListener(): если получатель использует onmessage вместо него, то start() вызывается неявно:

window.addEventListener("message", (event) => {
  const myPort = event.ports[0];

  myPort.onmessage = (event) => {
    received.textContent = event.data;
  };
});

• Связанные события: messageerror.
• Использование обмена сообщениями через канал