MessageEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

MessageEvent 是接口代表一段被目标对象接收的消息。

用来代表下列情况的消息

通过这个事件触发的动作被定义为一个函数，该函数作为相关message事件 (例如使用前文所列的onmessage 处理器) 的事件处理器。

备注： 此特性在 Web Worker 中可用。

构造函数

MessageEvent()

创建一个新的 消息事件 。

属性

继承其父类 Event 的属性。

MessageEvent.data 只读

返回 DOMString, Blob 或者 ArrayBuffer，包含来自发送者的数据。

MessageEvent.origin

返回一个表示消息发送者来源的USVString

MessageEvent.lastEventId 只读

DOMString representing a unique ID for the event.

MessageEvent.source

MessageEventSource (可以是 WindowProxy, MessagePort, 或 ServiceWorker 对象) 代表消息发送者。

MessageEvent.ports

MessagePort对象数组，表示消息正通过特定通道（数据通道）发送的相关端口（适用于通道消息传输或者向一个共享线程（shared work）发送消息时）。

方法

继承父类 Event 的方法。

MessageEvent.initMessageEvent()

不要再使用: 使用 MessageEvent()。

示例

在我们的基础共享线程示例 Basic shared worker example (run shared worker) 中，我们有两个 HTML 页，每一页都用简单的 js 代码去执行简单的计算。不同的脚本使用同一个 worker 文件去执行计算 — 它们都可以访问那个 worker 文件，即使它们（scripts）运行在不同的窗口。

下面的代码片段展示了使用SharedWorker()构造器创建一个 SharedWorker对象。

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

接下来两份脚本通过一个SharedWorker.port方法创建的MessagePort对象访问 worker。如果 onmessage 事件通过 addEventListener 被绑定，端口可以用start()方法手动开启：

js
myWorker.port.start();

当端口被打开，两份脚本各自都可用 port.postMessage() 向 worker 传消息并用 port.onmessage处理它（worker）传来的消息：

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

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

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

在 worker 内部我们使用 SharedWorkerGlobalScope.onconnect 处理器来连接前文说到相同端口。与 worker 相关联的端口可以在 connect 事件的 ports 属性中访问到——接着我们使用 MessagePort start() 方法打开端口，onmessage 处理器来处理主线程传来的消息。

js
onconnect = function (e) {
  var port = e.ports[0];

  port.addEventListener("message", function (e) {
    var workerResult = "Result: " + e.data[0] * e.data[1];
    port.postMessage(workerResult);
  });

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

规范

Specification
HTML Standard
# the-messageevent-interface

浏览器兼容性

BCD tables only load in the browser