DedicatedWorkerGlobalScope：message 事件

注意： 此功能仅在 专用 Web Workers 中可用。

当 worker 从其父级接收消息时（即当父级使用 Worker.postMessage() 发送消息时），会在 DedicatedWorkerGlobalScope 对象上触发 message 事件。

此事件不可取消且不冒泡。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

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

onmessage = (event) => {};

事件类型

一个 MessageEvent。继承自 Event。

Event MessageEvent

事件属性

此接口还继承了其父级 Event 的属性。

MessageEvent.data 只读

由消息发射器发送的数据。

MessageEvent.origin 只读

表示消息发射器源的字符串。

MessageEvent.lastEventId 只读

表示事件的唯一 ID 的字符串。

MessageEvent.source 只读

一个 MessageEventSource（可以是 Window、MessagePort 或 ServiceWorker 对象），表示消息发射器。

MessageEvent.ports 只读

一个 MessagePort 对象数组，表示与消息正在通过的通道关联的端口（在适当情况下，例如在通道消息传递中或将消息发送到共享 worker 时）。

示例

以下代码片段显示了使用 Worker() 构造函数创建 Worker 对象。当表单输入 first 内的值发生变化时，消息将传递给 worker。还提供了一个 onmessage 处理程序来处理从 worker 传回的消息。

js
// main.js

const myWorker = new Worker("worker.js");

first.onchange = () => {
  myWorker.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

// worker.js

self.onmessage = (e) => {
  console.log("Message received from main script");
  const workerResult = `Result: ${e.data[0] * e.data[1]}`;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};

在 main.js 脚本中，使用 onmessage 处理程序来处理来自 worker 脚本的消息

js
// main.js

myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
};

或者，脚本可以使用 addEventListener() 监听消息

js
// worker.js

self.addEventListener("message", (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
});

请注意，在主脚本中，onmessage 必须在 myWorker 上调用，而在 worker 脚本内部，您只需要 onmessage，因为 worker 实际上是全局范围（DedicatedWorkerGlobalScope）。

有关完整示例，请查看我们的 基本专用 worker 示例 (运行专用 worker）。

规范

规范
HTML 标准
# event-message
HTML 标准
# handler-dedicatedworkerglobalscope-onmessage

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅