diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/worker/onmessage | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/worker/onmessage')
-rw-r--r-- | files/zh-cn/web/api/worker/onmessage/index.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/worker/onmessage/index.html b/files/zh-cn/web/api/worker/onmessage/index.html new file mode 100644 index 0000000000..9fb062c24f --- /dev/null +++ b/files/zh-cn/web/api/worker/onmessage/index.html @@ -0,0 +1,124 @@ +--- +title: Worker.onmessage +slug: Web/API/Worker/onmessage +translation_of: Web/API/Worker/onmessage +--- +<p>{{APIRef("Web Workers API")}}</p> + +<p>{{domxref("Worker")}} 接口的<strong><code>onmessage</code></strong>属性表示一个{{domxref("EventHandler")}}事件处理函数,当{{event("message")}} 事件发生时,该函数被调用。这些事件所属{{domxref("MessageEvent")}}类型,且当Worker子线程返回一条消息时被调用(比如:从{{domxref("DedicatedWorkerGlobalScope.postMessage")}}函数发出的信息)</p> + +<div class="note"> +<p><strong>注意</strong>: 消息被装载到 {{event("message")}}事件对象的<code>data</code>属性。(译者:即传递的消息参数将被赋值给<code>onmessage</code>处理函数的事件参数<code>e</code>中的<code>data</code>属性)</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js notranslate">myWorker.onmessage = function(e) { ... }</pre> + +<h2 id="范例">范例</h2> + +<p>下面的代码片段示范用{{domxref("Worker.Worker", "Worker()")}} 构造函数创建一个{{domxref("Worker")}}对象。当表单的<code>first</code>输入框的值变更时,消息被传递给worker。<code>myWorker.onmessage</code>函数用来处理从worker回传的消息。</p> + +<pre class="brush: js notranslate">var myWorker = new Worker('worker.js'); + +first.onchange = function() { + myWorker.postMessage([first.value,second.value]); + console.log('Message posted to worker'); +} + +myWorker.onmessage = function(e) { + result.textContent = e.data; + console.log('Message received from worker'); +} +</pre> + +<p>在<code>worker.js</code>中, <code>onmessage</code> 函数用来接收从主线程传递过来的信息:</p> + +<pre class="brush: js notranslate">onmessage = function(e) { + console.log('Message received from main script'); + var workerResult = 'Result: ' + (e.data[0] * e.data[1]); + console.log('Posting message back to main script'); + postMessage(workerResult); +}</pre> + +<p>请注意,主线程中必须以myWorker.<code>onmessage</code>方式调用, 反之 <code>worker.js</code> 脚本中, 只需定义 <code>onmessage</code>, 因为worker.js全域有效({{domxref("DedicatedWorkerGlobalScope")}}).</p> + +<p>完整范例,请参考<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p> + +<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 WHATWG', "#handler-worker-onmessage", "Worker.onmessage")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("Web Workers")}}.</td> + </tr> + <tr> + <td>{{SpecName('Web Workers', "#handler-worker-onmessage", "Worker.onmessage")}}</td> + <td>{{Spec2('Web Workers')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支持</td> + <td>4</td> + <td>3.5</td> + <td>10.0</td> + <td>10.6</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>4.4</td> + <td>3.5</td> + <td>1.0.1</td> + <td>10.0</td> + <td>11.5</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参阅">参阅</h2> + +<p>{{domxref("Worker")}} 接口所属。</p> |