MessageChannel

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

MessageChannel()

Возвращает новый объект MessageChannel с двумя новыми объектами MessagePort.

MessageChannel.port1 Только для чтения

Возвращает порт1 канала.

MessageChannel.port2 Только для чтения

Возвращает порт2 канала.

В следующем примере показано создание нового канала с помощью конструктора 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 (запустить онлайн).

• Использование канальной передачи сообщений