ServiceWorkerGlobalScope：message 事件

安全上下文：此功能仅在安全上下文（HTTPS）中可用，在一些或所有支持的浏览器中可用。

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

当收到传入消息时，将发生ServiceWorkerGlobalScope 接口的message 事件。受控页面可以使用ServiceWorker.postMessage() 方法向服务工作者发送消息。服务工作者可以选择通过Client.postMessage() 发送响应，对应于受控页面。

此事件不可取消，也不会冒泡。

语法

在像addEventListener() 这样的方法中使用事件名称，或者设置事件处理程序属性。

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

onmessage = (event) => {};

事件类型

一个ExtendableMessageEvent。继承自ExtendableEvent。

Event ExtendableEvent ExtendableMessageEvent

事件属性

继承自其父类ExtendableEvent 的属性.

ExtendableMessageEvent.data 只读

返回事件数据。它可以是任何数据类型。如果在 messageerror 事件中分发，该属性将为 null。

ExtendableMessageEvent.origin 只读

返回发送消息的Client 的来源。

ExtendableMessageEvent.lastEventId 只读

在服务器发送的事件 中，表示事件源的最后一个事件 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");
  });
}

服务工作者可以通过监听 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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅