MessageEvent

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

MessageEvent 接口表示目标对象接收到的消息。

它用于表示以下情况下的消息：

此事件触发的操作在相关 message 事件的事件处理程序中定义的函数中定义。

Event MessageEvent

构造函数

MessageEvent()

创建一个新的 MessageEvent。

实例属性

此接口还继承了其父接口 Event 的属性。

MessageEvent.data 只读

消息发射器发送的数据。

MessageEvent.origin 只读

表示消息发射器来源的字符串。

MessageEvent.lastEventId 只读

表示事件唯一 ID 的字符串。

MessageEvent.source 只读

一个 MessageEventSource（可以是 WindowProxy、MessagePort 或 ServiceWorker 对象），表示消息发射器。

MessageEvent.ports 只读

一个 MessagePort 对象数组，表示消息正在通过的通道关联的端口（在适当的情况下，例如在通道消息传递中或向共享 Worker 发送消息时）。

实例方法

此接口还继承了其父接口 Event 的方法。

initMessageEvent()

初始化消息事件。请勿再使用此方法 - 请改用 MessageEvent() 构造函数。

示例

在我们的 基本共享 Worker 示例（运行共享 Worker）中，我们有两个 HTML 页面，每个页面都使用一些 JavaScript 执行简单的计算。不同的脚本使用相同的 Worker 文件执行计算 - 即使它们的页面在不同的窗口中运行，它们都可以访问它。

以下代码片段显示了使用 SharedWorker() 构造函数创建 SharedWorker 对象。两个脚本都包含此内容

js
const myWorker = new SharedWorker("worker.js");

然后，两个脚本都通过使用 SharedWorker.port 属性创建的 MessagePort 对象访问 Worker。如果使用 addEventListener 附加 onmessage 事件，则使用其 start() 方法手动启动端口

js
myWorker.port.start();

端口启动后，两个脚本都向 Worker 发送消息并使用 port.postMessage() 和 port.onmessage 分别处理从 Worker 发送的消息。

js
first.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

second.onchange = () => {
  myWorker.port.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

myWorker.port.onmessage = (e) => {
  result1.textContent = e.data;
  console.log("Message received from worker");
};

在 Worker 内部，我们使用 onconnect 处理程序连接到上面讨论的相同端口。与该 Worker 关联的端口可在 connect 事件的 ports 属性中访问 - 然后我们使用 MessagePort 的 start() 方法启动端口，并使用 onmessage 处理程序处理从主线程发送的消息。

js
onconnect = (e) => {
  const port = e.ports[0];

  port.addEventListener("message", (e) => {
    const workerResult = `Result: ${e.data[0] * e.data[1]}`;
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
};

规范

规范
HTML 标准
# the-messageevent-interface

浏览器兼容性

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

另请参阅