此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

Worker:message 事件

基线
广泛可用

自 2015年7月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

当 worker 的父级接收到来自其 worker 的消息时(也就是说,当 worker 通过 DedicatedWorkerGlobalScope.postMessage() 发送消息时),会在 Worker 对象上触发 message 事件。

此事件不能取消,也不会冒泡。

语法

在如 addEventListener() 等方法中使用事件名称,或者使用事件处理器属性。

js
addEventListener("message", (event) => {});

onmessage = (event) => {};

事件类型

MessageEvent。继承自 Event。

Event MessageEvent

事件属性

此接口也从其父接口 Event 继承属性。

MessageEvent.data 只读

消息发送者发送的数据。

MessageEvent.origin 只读

一个字符串,代表消息发送者的来源。

MessageEvent.lastEventId 只读

一个字符串,代表事件的唯一 ID。

MessageEvent.source 只读

一个 MessageEventSource(可以是一个 WindowProxy、MessagePort 或 ServiceWorker 对象),代表消息发送者。

MessageEvent.ports 只读

一个 MessagePort 对象的数组,代表与消息被发送的通道相关的端口(在适当的情况下,例如在通道消息传递或向 shared worker 发送消息时)。

示例

下面的代码创建了一个 worker 并使用 addEventListener() 监听从 worker 发来的消息:

js
const worker = new Worker("static/scripts/worker.js");

worker.addEventListener("message", (event) => {
  console.log(`Received message from worker: ${event.data}`);
});

另外,也可以使用 onmessage 事件处理器属性进行监听:

js
const worker = new Worker("static/scripts/worker.js");

worker.onmessage = (event) => {
  console.log(`Received message from worker: ${event.data}`);
};

worker 使用 self.postMessage() 发出消息:

js
// static/scripts/worker.js

self.postMessage("I'm alive!");

规范

规范
HTML
# event-message

浏览器兼容性

参见