MessagePort: метод postMessage()

Метод postMessage() интерфейса MessagePort отправляет сообщение с порта и, необязательно, передает владение объектами в другие контексты браузера.

message

Сообщение, которое вы хотите отправить по каналу. Оно может быть любого базового типа данных. Несколько элементов данных можно отправить в виде массива.

transfer Необязательно

Необязательный массив массивов передаваемых объектов для передачи владения. Владение этими объектами передается стороне назначения, и они больше не доступны на стороне отправки. Эти передаваемые объекты должны быть присоединены к сообщению; в противном случае они будут перемещены, но фактически не будут доступны на стороне получателя.

options Необязательно

Необязательный объект, содержащий следующие свойства:

transfer Необязательно

Имеет то же значение, что и параметр transfer.

None (undefined).

В следующем блоке кода показан новый канал, созданный с помощью конструктора MessageChannel(). Когда IFrame загружен, мы передаем MessageChannel.port2 в IFrame с помощью window.postMessage вместе с сообщением. IFrame получает сообщение и отправляет ответное сообщение через MessageChannel с помощью postMessage(). Обработчик handleMessage реагирует на отправку сообщения из IFrame с помощью onmessage, помещая его в абзац — к MessageChannel.port1 прислушиваются, чтобы проверить, когда придет сообщение.

const channel = new MessageChannel();
const para = document.querySelector("p");

const ifr = document.querySelector("iframe");
const otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Transferring message port", "*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}

// in the iframe…

window.addEventListener("message", (event) => {
  const messagePort = event.ports?.[0];
  messagePort.postMessage("Hello from the iframe!");
});

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

• Использование обмена сообщениями канала