blob: 552a12223947a88e5405623354e1ee88b6f25342 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
---
title: Worker
slug: Web/API/Worker
tags:
- DOM
- Worker
translation_of: Web/API/Worker
---
<p>{{APIRef("Web Workers API")}}</p>
<p>Worker 接口是 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API </a>的一部分，指的是一种可由脚本创建的后台任务，任务执行中可以向其创建者收发信息。要创建一个 Worker<strong> ，</strong>只须调用 <code>Worker(URL) </code>构造函数，函数参数 `URL` 为指定的脚本。</p>
<p>Worker 也可以创建新的 Worker，当然，所有 Worker 必须与其创建者<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy">同源</a>（注意：<a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">Blink</a>暂时不支持嵌套 Worker）。 </p>
<p>需要注意的是，不是所有函数和构造函数(或者说…类)都可以在 Worker 中使用。具体参考页面 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers">Worker 所支持的函数和类</a>。Worker 可以使用 <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> 发送请求，但是请求的<span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">responseXML</code><span style="line-height: inherit;"> 与 </span><code style="font-size: 14px; line-height: inherit;">channel</code><span style="line-height: inherit;"> 两个属性值始终返回</span><span style="line-height: inherit;"> </span><code style="font-size: 14px; line-height: inherit;">null</code> （<code>fetch</code> 仍可正常使用，没有类似的限制）。 </p>
<div class="blockIndicator note">
<p> 如果你要在火狐浏览器的扩展使用 Worker 访问 <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/js-ctypes">js-ctypes</a>，应使用 {{ domxref("ChromeWorker") }} 对象来替代。(译者注：这里没有看懂，希望有人能驳正，或添加说明)</p>
</div>
<h2 id="构造函数">构造函数</h2>
<dl>
<dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
<dd>创建一个专用Web worker，它只执行URL指定的脚本。使用 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Blob">Blob URL</a> 作为参数亦可。</dd>
</dl>
<h2 id="属性">属性</h2>
<p><em>继承</em>父对象<em>{{domxref("EventTarget")}} 的属性，以及实现对象 {{domxref("AbstractWorker")}}的属性。</em></p>
<h3 id="事件句柄"><em>事件句柄</em></h3>
<dl>
<dt>{{domxref("AbstractWorker.onerror")}}</dt>
<dd>当{{domxref("ErrorEvent")}} 类型的事件冒泡到 worker 时，事件监听函数 {{ domxref("EventListener") }} 被调用. 它继承于 {{domxref("AbstractWorker")}}.</dd>
<dt>{{domxref("Worker.onmessage")}}</dt>
<dd>当{{domxref("MessageEvent")}}类型的事件冒泡到 worker 时，事件监听函数 {{ domxref("EventListener") }} 被调用. 例如，一个消息通过 {{domxref("DedicatedWorkerGlobalScope.postMessage")}}，从执行者发送到父页面对象，消息保存在事件对象的 {{domxref("MessageEvent.data", "data")}} 属性中.</dd>
<dt>{{domxref("Worker.onmessageerror")}}</dt>
<dd>当{{event("messageerror")}} 类型的事件发生时，对应的{{event("Event_handlers", "event handler")}} 代码被调用。</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em>继承</em>父对象<em>{{domxref("EventTarget")}} 的方法，以及实现对象 {{domxref("AbstractWorker")}}的方法。</em></p>
<dl>
<dt>{{domxref("Worker.postMessage()")}}</dt>
<dd>发送一条消息到最近的外层对象，消息可由任何 JavaScript 对象组成。</dd>
</dl>
<dl>
<dt>{{domxref("Worker.terminate()")}}</dt>
<dd>立即终止 worker。该方法不会给 worker 留下任何完成操作的机会；就是简单的立即停止。Service Woker 不支持这个方法。</dd>
</dl>
<h2 id="示例">示例</h2>
<p>下面的代码通过构造函数 {{domxref("Worker.Worker", "Worker()")}} 创建了一个 {{domxref("Worker")}} 对象。</p>
<pre class="brush: js notranslate">var myWorker = new Worker('worker.js');
var first = document.querySelector('#number1');
var second = document.querySelector('#number2');
first.onchange = function() {
myWorker.postMessage([first.value,second.value]);
console.log('Message posted to worker');
}</pre>
<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', "#worker", "Worker")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>不同类型的worker兼容度不一致，详细参考具体定义的页面。</p>
<p>{{Compat("api.Worker")}}</p>
<h3 id="跨域行为的错误事件">跨域行为的错误事件</h3>
<p>浏览器的早期版本中，加载跨域的执行者脚本导致 <code>SecurityError</code>事件。根据规范的变更，而新版本的浏览器只有{{event("error")}}事件发生。关于如何处理这种事件的更多信息参考 <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a>.</p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li><a class="internal" href="/En/Using_web_workers" title="en/Using DOM workers">Using web workers</a></li>
<li><a href="/En/DOM/Worker/Functions_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Functions available to workers</a></li>
<li>Other kind of workers: {{ domxref("SharedWorker") }} and <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
<li>Non-standard, Gecko-specific workers: {{ domxref("ChromeWorker") }}, used by extensions.</li>
</ul>
|
