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 |
瀏覽器相容性
載入中…