Worker:message 事件

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

注意:此功能在 Web Workers 中可用,但 Service Workers 除外。

當 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(可以是 WindowProxyMessagePortServiceWorker 物件),表示訊息傳送者。

MessageEvent.ports 只讀

一個 MessagePort 物件陣列,表示訊息傳送通道(如果適用,例如在通道訊息傳遞或向共享工作者傳送訊息時)關聯的埠。

示例

此程式碼建立一個新的 Worker,並使用 addEventListener() 監聽來自它的訊息。

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

瀏覽器相容性

另見