MessagePort
注意:此功能在 Web Workers 中可用。
MessagePort 接口是 通道消息 API 的一部分,代表 MessageChannel 的两个端口之一,允许消息从一个端口发送,并在另一个端口接收。
MessagePort 是一个 可转移对象。
实例方法
继承自其父类 EventTarget 的方法。.
postMessage()-
从端口发送消息,并可选择将对象的拥有权转移给其他浏览上下文。
start()-
启动端口上排队的消息的发送(仅在使用
EventTarget.addEventListener时需要;使用onmessage时则隐含了此操作)。 close()-
断开端口连接,使其不再处于活动状态。
事件
继承其父级 EventTarget 的事件。.
message-
当
MessagePort对象收到消息时触发。 messageerror-
当
MessagePort对象收到一条无法反序列化的消息时触发。
示例
在以下示例中,您可以看到使用 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-ports |
浏览器兼容性
加载中…