Worker:message 事件
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
当 worker 的父级接收到来自其 worker 的消息时(也就是说,当 worker 通过 DedicatedWorkerGlobalScope.postMessage()
发送消息时),会在 Worker
对象上触发 message
事件。
此事件不能取消,也不会冒泡。
语法
在如 addEventListener()
等方法中使用事件名称,或者使用事件处理器属性。
addEventListener("message", (event) => {});
onmessage = (event) => {};
事件类型
MessageEvent
。继承自 Event
。
事件属性
此接口也从其父接口 Event
继承属性。
MessageEvent.data
只读-
消息发送者发送的数据。
MessageEvent.origin
只读-
一个字符串,代表消息发送者的来源。
MessageEvent.lastEventId
只读-
一个字符串,代表事件的唯一 ID。
MessageEvent.source
只读-
一个
MessageEventSource
(可以是一个 WindowProxy、MessagePort
或ServiceWorker
对象),代表消息发送者。 MessageEvent.ports
只读-
一个
MessagePort
对象的数组,代表与消息被发送的通道相关的端口(在适当的情况下,例如在通道消息传递或向 shared worker 发送消息时)。
示例
下面的代码创建了一个 worker 并使用 addEventListener()
监听从 worker 发来的消息:
const worker = new Worker("static/scripts/worker.js");
worker.addEventListener("message", (event) => {
console.log(`Received message from worker: ${event.data}`);
});
另外,也可以使用 onmessage
事件处理器属性进行监听:
const worker = new Worker("static/scripts/worker.js");
worker.onmessage = (event) => {
console.log(`Received message from worker: ${event.data}`);
};
worker 使用 self.postMessage()
发出消息:
// static/scripts/worker.js
self.postMessage("I'm alive!");
规范
Specification |
---|
HTML Standard # event-message |
浏览器兼容性
BCD tables only load in the browser