<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25  86,20  86,30  76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/MessageEvent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="176" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">MessageEvent</text></a></svg></div>
					

  a:hover text { fill: #0095DD; pointer-events: all;}
					

构造函数

MessageEvent()

创建新的 MessageEvent .

特性

This interface also inherits properties from its parent, 事件 .

MessageEvent.data 只读

The data sent by the message emitter.

MessageEvent.origin 只读

USVString representing the origin of the message emitter.

MessageEvent.lastEventId 只读

DOMString representing a unique ID for the event.

MessageEvent.source 只读

A MessageEventSource (which can be a WindowProxy , MessagePort ，或 ServiceWorker object) representing the message emitter.

MessageEvent.ports 只读

An array of MessagePort objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).

方法

This interface also inherits methods from its parent, 事件 .

initMessageEvent()

Initializes a message event. Do not use this anymore — 使用 MessageEvent() constructor instead.

范例

In our Basic shared worker example ( run shared worker ), we have two HTML pages, each of which uses some JavaScript to perform a simple calculation. The different scripts are using the same worker file to perform the calculation — they can both access it, even if their pages are running inside different windows.

The following code snippet shows creation of a SharedWorker 对象使用 SharedWorker() constructor. Both scripts contain this:

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

Both scripts then access the worker through a MessagePort object created using the SharedWorker.port property. If the onmessage event is attached using addEventListener, the port is manually started using its start() 方法：

myWorker.port.start();
						

When the port is started, both scripts post messages to the worker and handle messages sent from it using port.postMessage() and port.onmessage , respectively:

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');
}
						

Inside the worker we use the SharedWorkerGlobalScope.onconnect handler to connect to the same port discussed above. The ports associated with that worker are accessible in the connect event's ports property — we then use MessagePort start() method to start the port, and the onmessage handler to deal with messages sent from the main threads.

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.
}
						

规范

规范	状态	注释
HTML 实时标准 The definition of 'MessageEvent' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
MessageEvent	Chrome 1	Edge 12	Firefox 4	IE 9	Opera 10.6	Safari 4	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 11	Safari iOS 3	Samsung Internet Android 1.0
MessageEvent() 构造函数	Chrome 1	Edge 12	Firefox 4	IE 9	Opera ?	Safari 4	WebView Android 37	Chrome Android 18	Firefox Android ?	Opera Android ?	Safari iOS 3	Samsung Internet Android 1.0
data	Chrome 1	Edge 12	Firefox 4	IE 9	Opera Yes	Safari 4	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS 3	Samsung Internet Android Yes
initMessageEvent 弃用	Chrome 1	Edge 12	Firefox 4	IE 9	Opera Yes	Safari 4	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS 3	Samsung Internet Android Yes
lastEventId	Chrome 1	Edge 17	Firefox 4	IE 9	Opera Yes	Safari 4	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS 3	Samsung Internet Android Yes
origin	Chrome 1	Edge 12	Firefox 4	IE 9	Opera Yes	Safari 4	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android Yes	Safari iOS 3	Samsung Internet Android Yes
ports	Chrome 1	Edge 12	Firefox 4	IE 9	Opera Yes	Safari 4	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS 3	Samsung Internet Android Yes
source	Chrome Yes	Edge 12	Firefox 55	IE No	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android 55	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

弃用。不要用于新网站。

弃用。不要用于新网站。

另请参阅

• ExtendableMessageEvent — similar to this interface but used in interfaces that needs to give more flexibility to authors.

元数据

• 最后修改： Jun 2, 2020