We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Channel Messaging API 讓同屬一份文件不同瀏覽環境的兩份程式腳本 (如兩個 IFrame、或主頁面和 IFrame、文件和 SharedWorker、或兩個 worker),也能夠經由雙向 channel (通道) 兩端的 port (連接阜) 直接傳遞訊息互相溝通。

註: This feature is available in Web Workers.

Channel 訊息概念與使用情境

MessageChannel() 建構子產生 channel, 一但生成了,便可以存取 channel 兩端的 port: MessageChannel.port1MessageChannel.port2,這兩個屬性會回傳 domxref("MessagePort")}} objects.)。建立 channel 的 app 使用 port1,另一端用 port2,利用 window.postMessage 方法帶入參數,向 port2 傳送訊息以及移轉物件 (這裡也就是只 port)。

一但可移轉物件被移轉後,前任擁有者便失去所有權,例如當 port 移轉出去後,原本持有該 port 的環境便不能再使用之。目前可移轉物件只有 ArrayBuffer 以及 MessagePort

另一端的瀏覽環境則藉由 MessagePort.onmessage 監聽訊息、從訊息事件物件的 data 屬性擷取訊息資料,然後再呼叫 MessagePort.postMessage 回傳訊息。

如果想關閉訊息 channel,則呼叫 MessagePort.close

更多 API 使用細節請見 Using channel messaging

Channel 訊息介面

生成一個新的 message channel。
控制 port,用來傳送和監聽訊息。
MessagePorts 陣列,實驗性質方案;用來同時廣播到多個訊息 port。



Specification Status Comment
HTML Living Standard Living Standard Channel messaging defined in section 9.5. No difference to the the HTML5 Web Messaging spec.
Unknown Unknown W3C version of the spec.


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 41 (41) 10.0 10.6 5
PortCollection No support No support No support No support No support
Available in workers (Yes) 41 (41) (Yes) (Yes) (Yes)
Feature Android Chrome Mobile Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 4.4 4 41.0 (41) No support 10.0 11.5 5.1
PortCollection No support No support No support No support No support No support No support
Available in workers (Yes) (Yes) 41.0 (41) (Yes) (Yes) (Yes) (Yes)



此頁面的貢獻者: foxbrush
最近更新: foxbrush,