MessageChannel()

MessageChannel 接口的 MessageChannel() 构造函数返回一个新的 MessageChannel 对象,返回的对象中包含两个 MessagePort 对象。

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

语法

var channel = new MessageChannel();

返回值

一个新创建的 MessageChannel 对象。

例子

在下面的代码块中,你会看到一个由 MessageChannel.MessageChannel  构造函数创建的新 Channel. 当 IFrame 被加载后,我们使用 MessagePort.postMessage 把 port2 和一条消息一起发送给 IFrame. 然后 handleMessage 回调响应 IFrame 发回的消息(使用 MessagePort.onmessage),并把它渲染到页面段落中。MessageChannel.port1 用来监听,当消息到达时,会进行处理。

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 (在线运行)。

规范

Specification Status Comment
HTML Living Standard
MessageChannel()
Living Standard

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
MessageChannel() constructorChrome Full support 4Edge Full support 12Firefox 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 1.0

Legend

Full support  
Full support

参见