DedicatedWorkerGlobalScope: message 事件
注意:此功能仅在 专用 Web Worker 中可用。
当 Worker 从其父级接收到消息时(即,当父级使用 Worker.postMessage() 发送消息时),会在 DedicatedWorkerGlobalScope 对象上触发 message 事件。
此事件不可取消,也不会冒泡。
语法
在诸如 addEventListener() 之类的方法中使用事件名称,或设置事件处理程序属性。
addEventListener("message", (event) => { })
onmessage = (event) => { }
事件类型
一个 MessageEvent。继承自 Event。
事件属性
此接口还继承了其父级 Event 的属性。
MessageEvent.data只读-
由消息发送者发送的数据。
MessageEvent.origin只读-
一个字符串,表示消息发送者的源。
MessageEvent.lastEventId只读-
一个字符串,表示事件的唯一 ID。
MessageEvent.source只读-
一个
MessageEventSource(可以是Window、MessagePort或ServiceWorker对象)代表消息的发送者。 MessageEvent.ports只读-
一个
MessagePort对象数组,表示消息发送通道(如果适用,例如在通道消息传递或向共享工作者发送消息时)关联的端口。
示例
下面的代码片段展示了如何使用 Worker() 构造函数创建一个 Worker 对象。当表单输入 first 中的值发生变化时,会将消息传递给 Worker。还存在一个 onmessage 处理程序,用于处理从 Worker 传递回来的消息。
// 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 脚本的消息。
// main.js
myWorker.onmessage = (e) => {
result.textContent = e.data;
console.log("Message received from worker");
};
或者,脚本可以使用 addEventListener() 来监听消息。
// 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-messageeventtarget-onmessage |
浏览器兼容性
加载中…