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 上的通道訊息傳遞基本演示（也可以線上執行）。