MessageChannel
Channel Messaging API 的 MessageChannel
接口允许我们创建一个新的消息通道,并通过它的两个 MessagePort
属性发送数据。
备注: 此特性在 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 基本示例(也可以在线运行示例)。
规范
Specification |
---|
HTML Standard # message-channels |
浏览器兼容性
BCD tables only load in the browser