The Worker
interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker()
constructor and specifying a script to be run in the worker thread.
Workers may in turn spawn new workers as long as those workers are hosted within the same origin as the parent page (Note: nested workers are currently not implemented in WebKit). In addition workers may use XMLHttpRequest
for network I/O, with the stipulation that the responseXML
and channel
attributes on XMLHttpRequest
always return null
.
Not all interfaces and functions are available to the script associated with a Worker
.
In Firefox, if you want to use workers in extensions and would like to have access to js-ctypes, you should use the ChromeWorker
object instead.
Worker()
Inherits properties from its parent, EventTarget
, and implements properties from AbstractWorker
.
AbstractWorker.onerror
EventListener
called whenever an ErrorEvent
of type error
bubbles through to the worker. This is inherited from AbstractWorker
.Worker.onmessage
EventListener
called whenever a MessageEvent
of type message
bubbles through the worker — i.e. when a message is sent to the parent document from the worker via DedicatedWorkerGlobalScope.postMessage
. The message is stored in the event's data
property.Worker.onmessageerror
EventHandler
representing the code to be called when the messageerror
event is raised.Inherits methods from its parent, EventTarget
, and implements methods from AbstractWorker
.
Worker.postMessage()
any
JavaScript object — to the worker's inner scope.Worker.terminate()
The following code snippet shows creation of a Worker
object using the Worker()
constructor and usage of the object:
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'); }
For a full example, see ourBasic dedicated worker example (run dedicated worker).
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'Worker' in that specification. | Living Standard |
Support varies for different types of workers. See each worker type's page for specifics.
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 4 | Yes | 3.5 | 10 | 10.6 | 4 |
Worker() constructor |
4 | Yes | 3.5 | 10 | 10.6 | 4 |
onmessage |
4 | 12 | 3.5 | 10 | 10.6 | 4 |
onmessageerror |
60 | ? | 57 | ? | 47 | ? |
postMessage |
Yes | 12 | Yes | 10
|
47 | Yes |
terminate |
4 | 12 | 3.5 | 10 | 10.6 | 4 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 4 | 18 | Yes | 4 | 11.5 | 5.1 | Yes |
Worker() constructor |
4 | 18 | Yes | 4 | 11.5 | 5.1 | Yes |
onmessage |
4 | 18 | Yes | 4 | 11.5 | 5.1 | Yes |
onmessageerror |
60 | 60 | ? | 57 | 47 | ? | No |
postMessage |
Yes | Yes | Yes | Yes | 47 | Yes | Yes |
terminate |
4 | 18 | Yes | 4 | 11.5 | 5.1 | Yes |
In earlier browser versions, trying to load a cross-origin worker script threw a SecurityError
; in newer browsers an error
event is thrown instead due to a spec change. Find out more information on how to deal with this in Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed.
SharedWorker
and ServiceWorker.ChromeWorker
, used by extensions.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Worker