MessagePort：postMessage() 方法

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月⁩.

备注： 此特性在 Web Worker 中可用。

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 基础演示（也可以在线运行）。