MessageChannel

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 2015 年 9 月以來,該特性已在各大瀏覽器中可用。

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

MessageChannel 介面屬於 Channel Messaging API,它允許我們建立一個新的訊息通道,並透過它的兩個 MessagePort 屬性在其中傳送資料。

建構函式

MessageChannel()

返回一個新的 MessageChannel 物件,其中包含兩個新的 MessagePort 物件。

例項屬性

MessageChannel.port1 只讀

返回通道的 port1。

MessageChannel.port2 只讀

返回通道的 port2。

示例

在下面的示例中,你可以看到使用 MessageChannel() 建構函式建立了一個新的通道。

當 IFrame 載入完成後,我們為 MessageChannel.port1 註冊一個 onmessage 處理程式,並使用 window.postMessage 方法將 MessageChannel.port2 與一條訊息一起傳輸到 IFrame。

當從 IFrame 接收到一條訊息時,onMessage 函式會將訊息輸出到一個段落中。

js
const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");

// Wait for the iframe to load
iframe.addEventListener("load", onLoad);

function onLoad() {
  // Listen for messages on port1
  channel.port1.onmessage = onMessage;

  // Transfer port2 to the iframe
  iframe.contentWindow.postMessage("Hello from the main page!", "*", [
    channel.port2,
  ]);
}

// Handle messages received on port1
function onMessage(e) {
  output.innerHTML = e.data;
}

有關完整的工作示例,請參閱 GitHub 上的 通道訊息傳遞基本演示也可以線上執行)。

規範

規範
HTML
# message-channels

瀏覽器相容性

另見