MessagePort

Интерфейс MessagePort из API канальной связи представляет собой один из двух портов MessageChannel, позволяющий отправлять сообщения с одного порта и получать их на другом.

MessagePort — это передаваемый объект.

Наследует методы от родительского класса, EventTarget.

postMessage()

Отправляет сообщение с порта и, необязательно, передает владение объектами другим контекстам просмотра.

start()

Запускает отправку сообщений, помещенных в очередь на порту (необходимо только при использовании EventTarget.addEventListener; подразумевается при использовании onmessage).

close()

Отключает порт, поэтому он больше не активен.

Наследует события от родительского класса, EventTarget.

message

Срабатывает, когда объект MessagePort получает сообщение.

messageerror

Срабатывает, когда объект MessagePort получает сообщение, которое нельзя десериализовать.

В приведенном ниже примере показано создание нового канала с использованием конструктора MessageChannel().

После загрузки IFrame мы регистрируем обработчик onmessage для MessageChannel.port1 и передаем MessageChannel.port2 в IFrame с помощью метода window.postMessage вместе с сообщением.

Когда сообщение возвращается из IFrame, функция onMessage выводит сообщение в абзац.

const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;

  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "*", [
    channel.port2,
  ]);
}

// Handle messages received on port1
function onMessage(e) {
  output.innerHTML = e.data;
}

Полный рабочий пример см. в нашем демо базовой канальной связи на GitHub (запустить онлайн).

• Использование канальной связи