MessagePort: postMessage() 方法

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

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

语法

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

参数

message

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

transfer 可选

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

options 可选

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

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

在以下代码块中，您可以看到使用 MessageChannel() 构造函数创建了一个新通道。当 IFrame 加载后，我们将 MessageChannel.port2 传递给 IFrame，并使用 window.postMessage 以及一条消息。iframe 接收消息，并使用 postMessage() 通过 MessageChannel 发送回消息。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!");
});