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