MessageChannel

Channel Messaging API的MessageChannel 接口允许我们创建一个新的消息通道,并通过它的两个MessagePort 属性发送数据。

Note: 此特性在 Web Worker 中可用。

属性

MessageChannel.port1 只读
返回channel的port1。
MessageChannel.port2 只读
返回channel的port2。

构造函数

MessageChannel()

返回一个带有两个MessagePort属性的MessageChannel新对象。

示例

在以下代码块中,您可以看到使用MessageChannel构造函数实例化了一个channel对象。当iframe加载完毕,我们使用MessagePort.postMessage方法把一条消息和MessageChannel.port2传递给iframe。handleMessage处理程序将会从iframe中(使用MessagePort.onmessage监听事件)接收到信息,将数据其放入innerHTML中。

var channel = new MessageChannel();
var para = document.querySelector('p');
    
var ifr = document.querySelector('iframe');
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);
    
function iframeLoaded() {
  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}   

一个完整的运行示例,可以在Github上查看 channel messaging basic demo  (run it live too).

Specifications/规范

Specification Status Comment
HTML Living Standard
MessageChannel
Living Standard No difference from Unknown.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
MessageChannelChrome Full support 4Edge Full support YesFirefox Full support 41IE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 41Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support Yes
MessageChannel() constructorChrome Full support 4Edge Full support YesFirefox Full support 41IE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 41Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android ?
port1Chrome Full support 4Edge Full support YesFirefox Full support 41IE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 41Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support Yes
port2Chrome Full support 4Edge Full support YesFirefox Full support 41IE Full support 10Opera Full support 10.6Safari Full support 5WebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 41Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

参见