initial commit

2 files changed, 327 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/messageevent/index.html b/files/zh-cn/web/api/messageevent/index.html
new file mode 100644
index 0000000000..6af707a816
--- /dev/null
+++ b/files/zh-cn/web/api/messageevent/index.html
@@ -0,0 +1,192 @@
+---
+title: MessageEvent
+slug: Web/API/MessageEvent
+tags:
+  - API
+  - MessageEvent
+  - WebRTC
+  - Websockets API
+  - 参考
+  - 接口
+translation_of: Web/API/MessageEvent
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>  <code><strong>MessageEvent</strong></code>  是接口代表一段被目标对象接收的消息。</p>
+
+<p>用来代表下列情况的消息</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events">Server-sent events</a> (参见{{domxref("EventSource.onmessage")}}).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">Web sockets</a> (参见 <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket">WebSocket</a> 接口的 <code>onmessage</code> 属性).</li>
+ <li>Cross-document messaging (参见 {{domxref("Window.postMessage()")}} 和 {{domxref("Window.onmessage")}}).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API">Channel messaging</a> (参见 {{domxref("MessagePort.postMessage()")}} 和{{domxref("MessagePort.onmessage")}}).</li>
+ <li>Cross-worker/document messaging (参见上面两个入口, 还有 {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, 等等.)</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API">Broadcast channels</a> (参见 {{domxref("Broadcastchannel.postMessage()")}}) 和 {{domxref("BroadcastChannel.onmessage")}}).</li>
+ <li>WebRTC data channels (参见 {{domxref("RTCDataChannel.onmessage")}}).</li>
+</ul>
+
+<p>通过这个事件触发的动作被定义为一个函数，该函数作为相关{{event("message")}}事件 (例如使用前文所列的<code>onmessage</code> 处理器)的事件处理器。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="构造函数">构造函数</h2>
+
+<dl>
+ <dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt>
+ <dd>创建一个新的 <strong>消息事件 </strong>。</dd>
+</dl>
+
+<h2 id="Attributes" name="Attributes">属性</h2>
+
+<p><em>继承其父类 {{domxref("Event")}} 的属性。</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.data")}} {{ReadonlyInline}}</dt>
+ <dd>返回 {{domxref("DOMString")}}, {{domxref("Blob")}} 或者 {{domxref("ArrayBuffer")}}，包含来自发送者的数据。</dd>
+ <dt>{{domxref("MessageEvent.origin")}}</dt>
+ <dd> 返回一个表示消息发送者来源的{{domxref("USVString")}} </dd>
+ <dt>{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}</dt>
+ <dd>{{domxref("DOMString")}} representing a unique ID for the event.</dd>
+ <dt>{{domxref("MessageEvent.source")}}</dt>
+ <dd><code>MessageEventSource</code> (可以是 {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, 或 {{domxref("ServiceWorker")}} 对象) 代表消息发送者.</dd>
+ <dt>{{domxref("MessageEvent.ports")}}</dt>
+ <dd>{{domxref("MessagePort")}}对象数组，表示消息正通过特定通道（数据通道）发送的相关端口（适用于通道消息传输或者向一个共享线程（shared work ）发送消息时）。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>继承父类 {{domxref("Event")}} 的方法。</em></p>
+
+<dl>
+ <dt>{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}</dt>
+ <dd>… <strong>不要再使用</strong>: 使用 {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}。</dd>
+</dl>
+
+<p> </p>
+
+<h2 id="示例">示例</h2>
+
+<p>在我们的基础共享线程示例 <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>)中,我们有两个HTML页, 每一页都用简单的js代码去执行简单的计算. 不同的脚本使用同一个worker文件去执行计算 — 它们都可以访问那个worker文件，即使它们（scripts）运行在不同的窗口.</p>
+
+<p>下面的代码片段展示了使用{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}构造器创建一个 <code>SharedWorker</code>对象。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> myWorker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">SharedWorker</span><span class="punctuation token">(</span><span class="string token">'worker.js'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>接下来两份脚本通过一个{{domxref("SharedWorker.port")}}方法创建的{{domxref("MessagePort")}}对象访问worker。如果onmessage事件通过addEventListener被绑定，端口可以用<code>start()</code>方法手动开启：</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p>当端口被打开，两份脚本各自都可用 <code>port.postMessage()</code> 向worker传消息并用  <code>port.onmessage</code>处理它（worker）传来的消息:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">first<span class="punctuation token">.</span>onchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Message posted to worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+second<span class="punctuation token">.</span>onchange <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span><span class="punctuation token">[</span>first<span class="punctuation token">.</span>value<span class="punctuation token">,</span>second<span class="punctuation token">.</span>value<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Message posted to worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+myWorker<span class="punctuation token">.</span>port<span class="punctuation token">.</span>onmessage <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  result1<span class="punctuation token">.</span>textContent <span class="operator token">=</span> e<span class="punctuation token">.</span>data<span class="punctuation token">;</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Message received from worker'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>在worker内部我们使用{{domxref("SharedWorkerGlobalScope.onconnect")}} 处理器来连接前文说到相同端口. 与worker相关联的端口可以在{{event("connect")}}事件的<code>ports</code> 属性中访问到 — 接着我们使用{{domxref("MessagePort")}} <code>start()</code> 方法打开端口,  <code>onmessage</code> 处理器来处理主线程传来的消息。</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">onconnect <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> port <span class="operator token">=</span> e<span class="punctuation token">.</span>ports<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
+
+  port<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'message'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="keyword token">var</span> workerResult <span class="operator token">=</span> <span class="string token">'Result: '</span> <span class="operator token">+</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>data<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span> <span class="operator token">*</span> e<span class="punctuation token">.</span>data<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    port<span class="punctuation token">.</span><span class="function token">postMessage</span><span class="punctuation token">(</span>workerResult<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+  port<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Required when using addEventListener. Otherwise called implicitly by onmessage setter.</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特性</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatSafari('10.0+')}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>特性</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.0+</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 对于 Gecko 11.0 {{geckoRelease("11.0")}}, Gecko 支持 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></code> 类型的数据，但不支持 {{domxref("Blob")}} 类型的数据。</p>
+
+<p><strong style="color: #4d4e53; font-size: 2.143rem; font-weight: 700; letter-spacing: -1px;">参见</strong></p>
+
+<ul>
+ <li>{{domxref("ExtendableMessageEvent")}}，与此接口类似，但适合用于更灵活的场景。</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket_API">WebSocket API</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
+</ul>
diff --git a/files/zh-cn/web/api/messageevent/messageevent/index.html b/files/zh-cn/web/api/messageevent/messageevent/index.html
new file mode 100644
index 0000000000..54e163a42a
--- /dev/null
+++ b/files/zh-cn/web/api/messageevent/messageevent/index.html
@@ -0,0 +1,135 @@
+---
+title: MessageEvent.MessageEvent()
+slug: Web/API/MessageEvent/MessageEvent
+translation_of: Web/API/MessageEvent/MessageEvent
+---
+<div>{{APIRef("HTML DOM")}}{{draft}}</div>
+
+<p><code><strong>MessageEvent()</strong></code>构造函数创建一个新的 {{domxref("MessageEvent")}} 对象实例。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: js">var messageEvent = new MessageEvent(<em>type, init</em>);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">type</span></font></dt>
+ <dd>要创建的<code>MessageEvent</code>的类型。这可能是XXX中的一个</dd>
+ <dt>
+ <p><strong><code>init</code> </strong>{{optional_inline}}</p>
+ </dt>
+ <dd>
+ <p>可以包含以下属性的dictionary对象：</p>
+
+ <ul>
+  <li><code>data</code>: 您希望包含在MessageEvent中的数据。这可以是任何数据类型，如果没有指定，则默认为null。</li>
+  <li><code>origin</code>: {{domxref("USVString")}} 表示消息发送源。如果没有指定，则默认为空字符串("")。</li>
+  <li><code>lastEventId</code>: {{domxref("DOMString")}} 表示事件的唯一ID。如果没有指定，则默认为空字符串("")。</li>
+  <li><code>source</code>: <code>MessageEventSource</code> (可以是 {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, 或 {{domxref("ServiceWorker")}} 对象) 表示消息发送对象。如果没有设置，则默认为null。</li>
+  <li><code>ports</code>:  {{domxref("MessagePort")}} 对象数组，表示正在通过的消息通道关联的端口(在适当的情况下，例如在通道消息传递或向共享工作者发送消息时)。如果没有指定，则默认为空数组([])。</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">var myMessage = new MessageEvent('worker', {
+  data : 'hello'
+});
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML DOM", "#messageevent", "MessageEvent")}}</td>
+   <td>{{Spec2("HTML DOM")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatSafari('10.0+')}}</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> as {{domxref("USVString")}} and source as <code>MessageEventSource</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("55.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.0+</td>
+  </tr>
+  <tr>
+   <td><code>origin</code> as {{domxref("USVString")}} and source as <code>MessageEventSource</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("55.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li>{{domxref("ExtendableMessageEvent")}} — 类似于此接口，但用于需要为作者提供更多灵活性的接口。</li>
+</ul>