MessagePort：postMessage() 方法 - Web API

MessagePort：postMessage() 方法 - Web API | MDN

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.

MessagePort 接口的 postMessage() 方法从端口发送一条消息，可以将对象所有权转移给其他浏览上下文。

语法

postMessage(message)
postMessage(message, transfer)
postMessage(message, options)

参数

message

需要通过 channel 发送的消息。可以是任何基本数据类型。多个数据项可以作为数组发送。

transfer 可选

一个包含要转让所有权的可转移对象的可选的数组。这些对象的所有权将转移到接收方，发送方将不能再使用它们。这些可转移对象应附加到消息中；否则它们将被转移，但实际上在接收方无法访问。

options 可选

包含以下属性的可选对象：

transfer 可选: 与 transfer 参数含义相同。

在以下代码块中，你可以看到使用 MessageChannel() 构造函数创建了一个新的 channel。当 IFrame 加载完成后，我们使用 window.postMessage 中的 MessageChannel.port2 以及一条消息传递给 IFrame。IFrame 接收消息，并使用 MessageChannel 中的 postMessage() 上发送回上一条消息。

handleMessage 处理程序使用 onmessage 对从 iframe 发回的消息作出响应，并将其放入段落中；MessageChannel.port1 监听了 onmessage 事件，以检查消息何时到达。

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("传输信息端口", "*", [channel.port2]);
}

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

// 在 iframe 中...

window.addEventListener("message", (event) => {
  const messagePort = event.ports?.[0];
  messagePort.postMessage("你好，来自 iframe！");
});

要查看可运行的完整示例，参考我们在 Github 上的 channel messaging 基础演示（也可以在线运行）。