ExtendableMessageEvent

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

ExtendableMessageEvent 接口是 Service Worker API 的一部分，表示服务工作线程上触发的 message 事件（当从其他上下文在 ServiceWorkerGlobalScope 上接收消息时）的事件对象——扩展了此类事件的生命周期。

此接口继承自 ExtendableEvent 接口。

Event ExtendableEvent ExtendableMessageEvent

构造函数

ExtendableMessageEvent()

创建一个新的 ExtendableMessageEvent 对象实例。

实例属性

继承其父级 ExtendableEvent 的属性.

ExtendableMessageEvent.data 只读

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

ExtendableMessageEvent.origin 只读

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

ExtendableMessageEvent.lastEventId 只读

在 服务器发送事件 中表示事件源的最后一个事件 ID。

ExtendableMessageEvent.source 只读

返回发送消息的 Client 对象的引用。

ExtendableMessageEvent.ports 只读

返回包含表示关联消息通道的端口的 MessagePort 对象的数组。

实例方法

继承其父级 ExtendableEvent 的方法.

示例

在下面的示例中，页面通过 ServiceWorkerRegistration.active 获取 ServiceWorker 对象的句柄，然后调用其 postMessage() 函数。

js
// in the page being controlled
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
// in the service worker
addEventListener("message", (event) => {
  // event is an ExtendableMessageEvent object
  console.log(`The client sent me a message: ${event.data}`);

  event.source.postMessage("Hi client");
});

规范

规范
Service Workers
# extendablemessageevent-interface

浏览器兼容性

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

另请参阅