MessageChannel - 创建一个新的消息通道来发送数据

MessageChannel 是通道消息 API 的接口，让我们能够创建一个新的消息通道，并通过它通过它的两个 MessagePort 属性发送数据。

属性

MessageChannel.port1 只读

返回通道的端口 1。

MessageChannel.port2 只读

返回通道的端口 2。

构造函数

MessageChannel()

返回一个新的 MessageChannel 对象，包含了两个新的 MessagePort 对象。

实例

在下面的例子中，可以看到使用 MessageChannel() 的构造方法创建新的通道。

当 IFrame 加载完成，我们为 MessageChannel.port1 注册一个 onmessage 处理程序，并使用 window.postMessage 方法带上一条消息将 MessageChannel.port2 传输到 IFrame。

从 IFrame 收到消息后，onMessage 函数仅将消息输出到段落。

var channel = new MessageChannel();
var output = document.querySelector('.output');
var iframe = document.querySelector('iframe');

// 等待 iframe 加载
iframe.addEventListener("load", onLoad);

function onLoad() {
  // 监听端口 1 消息
  channel.port1.onmessage = onMessage;

  // 将端口 2 传送到 iframe
  iframe.contentWindow.postMessage('来自主网页的问好！', '*', [channel.port2]);
}

// 处理端口 1 收到的消息
function onMessage(e) {
  output.innerHTML = e.data;
}

有关完整的工作实例，请参阅我们在 Github 上的 通道消息传递基本演示 （也可以在线运行）。

规范

规范	状态	备注
HTML Living Standard Message channels 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 使用消息通道