MessageChannel
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.
备注： 此特性在 Web Worker 中可用。
Channel Messaging API 的 MessageChannel 接口允许我们创建一个新的消息通道，并通过它的两个 MessagePort 属性发送数据。
构造函数
MessageChannel()-
返回一个新的
MessageChannel对象，其中包含两个新的MessagePort对象。
实例属性
MessageChannel.port1只读-
返回 channel 的 port1。
MessageChannel.port2只读-
返回 channel 的 port2。
示例
在以下的代码块中，你可以看到使用 MessageChannel() 构造函数创建的新 Channel。
当 IFrame 加载完成后，我们将为 MessageChannel.port1 注册一个 onmessage 处理器，并使用 window.postMessage 方法将 MessageChannel.port2 和一条信息传输到 IFrame。
当收到 IFrame 返回的信息时，onMessage 函数会将信息输出到一个段落中。
js
const channel = new MessageChannel();
const output = document.querySelector(".output");
const iframe = document.querySelector("iframe");
// 等待 iframe 加载
iframe.addEventListener("load", onLoad);
function onLoad() {
// 在 port1 上监听消息
channel.port1.onmessage = onMessage;
// 将 port 2 传输到 iframe
iframe.contentWindow.postMessage("来自主页的您好！", "*", [channel.port2]);
}
// 处理 port 1 收到的消息
function onMessage(e) {
output.innerHTML = e.data;
}
有关完整的运行示例，请参阅我们在 GitHub 上的 channel messaging 基础示例，也可以实时运行它。
规范
| Specification |
|---|
| HTML # message-channels |
浏览器兼容性
Loading…