ServiceWorkerGlobalScope：message 事件
注意：此功能僅在 Service Workers 中可用。
ServiceWorkerGlobalScope 介面的 message 事件在收到傳入訊息時發生。受控頁面可以使用 ServiceWorker.postMessage() 方法向 Service Worker 傳送訊息。Service Worker 可以選擇透過 Client.postMessage() 向對應的受控頁面傳送響應。
此事件不可取消，也不會冒泡。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("message", (event) => { })
onmessage = (event) => { }
事件型別
事件屬性
繼承自其父級 ExtendableEvent 的屬性.
ExtendableMessageEvent.data只讀-
返回事件的資料。它可以是任何資料型別。如果分發在
messageerror事件中，則該屬性將為null。 ExtendableMessageEvent.origin只讀-
返回傳送訊息的
Client的來源。 ExtendableMessageEvent.lastEventId只讀-
在 Server-Sent Events 中，表示事件源的最後一個事件 ID。
ExtendableMessageEvent.source只讀-
返回傳送訊息的
Client物件的引用。 ExtendableMessageEvent.ports只讀-
返回包含代表關聯訊息通道的埠的
MessagePort物件的陣列。
示例
在下面的示例中，一個頁面透過 ServiceWorkerRegistration.active 獲取了 ServiceWorker 物件的控制代碼，然後呼叫了它的 postMessage() 函式。
js
// main.js
if (navigator.serviceWorker) {
navigator.serviceWorker.register("service-worker.js");
navigator.serviceWorker.addEventListener("message", (event) => {
// event is a MessageEvent object
console.log(`The service worker sent me a message: ${event.data}`);
});
navigator.serviceWorker.ready.then((registration) => {
registration.active.postMessage("Hi service worker");
});
}
Service Worker 可以透過監聽 message 事件來接收訊息
js
// service-worker.js
addEventListener("message", (event) => {
// event is an ExtendableMessageEvent object
console.log(`The client sent me a message: ${event.data}`);
event.source.postMessage("Hi client");
});
或者，指令碼可以使用 onmessage 來監聽訊息
js
// service-worker.js
self.onmessage = (event) => {
// event is an ExtendableMessageEvent object
console.log(`The client sent me a message: ${event.data}`);
event.source.postMessage("Hi client");
};
規範
| 規範 |
|---|
| Service Workers # eventdef-serviceworkerglobalscope-message |
| Service Workers # dom-serviceworkerglobalscope-onmessage |
瀏覽器相容性
載入中…