MessagePort：postMessage() 方法

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 2015 年 9 月以来，该特性已在各大浏览器中可用。

注意：此功能在 Web Workers 中可用。

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

语法

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

参数

message

您想通过通道发送的消息。这可以是任何基本数据类型。多个数据项可以作为数组发送。

注意： 可以相互通信的执行上下文可能不在同一个代理集群中，因此无法共享内存。SharedArrayBuffer 对象，或由其支持的缓冲区视图，不能跨代理集群发送。尝试这样做将在接收端生成一个包含 DataCloneError DOMException 的 messageerror 事件。

transfer 可选

一个可选的可传输对象数组，用于转移所有权。这些对象的所有权将转移到目标方，并且它们在发送方不再可用。这些可传输对象应该附加到消息中；否则它们将被移动，但在接收端实际上无法访问。

options 可选

一个包含以下属性的可选对象

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

在下面的代码块中，您可以看到使用 MessageChannel() 构造函数创建了一个新通道。当 IFrame 加载完成后，我们使用 window.postMessage 将 MessageChannel.port2 和一条消息一起传递给 IFrame。IFrame 接收到消息，并通过 postMessage() 在 MessageChannel 上发送一条消息回来。然后 handleMessage 处理程序通过 onmessage 响应从 iframe 发送回来的消息，将其放入一个段落中 — MessageChannel.port1 被监听，以检查消息何时到达。

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

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

ifr.addEventListener("load", iframeLoaded);

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 上的通道消息传递基本演示（也可以在线运行）。