MessageChannel
注意:此功能在 Web Workers 中可用。
MessageChannel 接口属于 Channel Messaging API,它允许我们创建一个新的消息通道,并通过它的两个 MessagePort 属性在其中发送数据。
构造函数
MessageChannel()-
返回一个新的
MessageChannel对象,其中包含两个新的MessagePort对象。
实例属性
MessageChannel.port1只读-
返回通道的 port1。
MessageChannel.port2只读-
返回通道的 port2。
示例
在下面的示例中,你可以看到使用 MessageChannel() 构造函数创建了一个新的通道。
当 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");
// Wait for the iframe to load
iframe.addEventListener("load", onLoad);
function onLoad() {
// Listen for messages on port1
channel.port1.onmessage = onMessage;
// Transfer port2 to the iframe
iframe.contentWindow.postMessage("Hello from the main page!", "*", [
channel.port2,
]);
}
// Handle messages received on port1
function onMessage(e) {
output.innerHTML = e.data;
}
有关完整的工作示例,请参阅 GitHub 上的 通道消息传递基本演示(也可以在线运行)。
规范
| 规范 |
|---|
| HTML # message-channels |
浏览器兼容性
加载中…