MessageChannel
注意:此功能在 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 |
瀏覽器相容性
載入中…