JavaScript WorkerGlobalScope : Global

The following are properties of the global object when running inside a Worker background process. They can be accessed from anywhere without additional qualifiers.

Spec

Instance Properties

globalThis : WorkerGlobalScope readonly

Returns the global object itself. This is the same as self (in a Worker context).

Example:

<script id='code' type='text/plain'>
  postMessage(`globalThis === self: ${globalThis === self}`);
</script>
<script>
  var code = document.getElementById('code').textContent;
  var blob = new Blob([code], { type: 'application/javascript' });
  var url = URL.createObjectURL(blob);
  var worker = new Worker(url);
  worker.onmessage = function(e) {
    console.log(e.data);
  };
</script>

Run

Results:

ECMAScript 2020

location : Location readonly

Returns the location of the worker script.

Example:

<script id='code' type='text/plain'>
  postMessage(location.href);
</script>
<script>
  var code = document.getElementById('code').textContent;
  var blob = new Blob([code], { type: 'application/javascript' });
  var url = URL.createObjectURL(blob);
  var worker = new Worker(url);
  worker.onmessage = function(e) {
    console.log(e.data);
  };
</script>

Run

Results:

Spec

self : WorkerGlobalScope readonly

Returns the global object itself. This is the same as globalThis (in a Worker context).

Example:

<script id='code' type='text/plain'>
  postMessage(self.location.href);
</script>
<script>
  var code = document.getElementById('code').textContent;
  var blob = new Blob([code], { type: 'application/javascript' });
  var url = URL.createObjectURL(blob);
  var worker = new Worker(url);
  worker.onmessage = function(e) {
    console.log(e.data);
  };
</script>

Run

Results:

Spec

Instance Methods

addEventListener 2 variants

addEventListener(type : String, listener : Function, [useCapture : Boolean]) : undefined

listener(event : Event) : undefined

Spec

addEventListener(type : String, listener : EventListener, [useCapture : Boolean]) : undefined

Spec

close() : undefined

Stops the worker.

Example:

<script id='code' type='text/plain'>
  var messageCount = 0;
  setInterval(function() {
    postMessage(messageCount);

    messageCount++;
    if (messageCount == 4) {
      close();
    }
  }, 10);
</script>
<script>
  var code = document.getElementById('code').textContent;
  var blob = new Blob([code], { type: 'application/javascript' });
  var url = URL.createObjectURL(blob);
  var worker = new Worker(url);

  worker.onmessage = function(e) {
    console.log('worker returned: ', e.data);
  };
</script>

Run

Results:

Spec

dispatchEvent(event : Event) : Boolean

Spec

postMessage(message : Object, [transfer : Array]) : undefined

Sends a message to the main thread. The main thread receives the message through the onmessage event. message will be in the event.data property.

Example:

<script id='code' type='text/plain'>
  postMessage('foo');
</script>
<script>
  var code = document.getElementById('code').textContent;
  var blob = new Blob([code], { type: 'application/javascript' });
  var url = URL.createObjectURL(blob);
  var worker = new Worker(url);
  worker.onmessage = function(e) {
    console.log('worker returned: ', e.data);
  };
</script>

Run

Results:

removeEventListener 2 variants

removeEventListener(type : String, listener : Function, [useCapture : Boolean]) : undefined

listener(event : Event) : undefined

Spec

removeEventListener(type : String, listener : EventListener, [useCapture : Boolean]) : undefined

Spec

Instance Events

onerror / 'error' event

listener(error : String) : undefined

Fired when there is an error in the worker.

Example:

<script id='code' type='text/plain'>
  onerror = function(e) {
    postMessage(e);
  };

  setTimeout(function() {
    throw 'foo';
  }, 10);
</script>
<script>
  var code = document.getElementById('code').textContent;
  var blob = new Blob([code], { type: 'application/javascript' });
  var url = URL.createObjectURL(blob);
  var worker = new Worker(url);
  worker.onmessage = function(e) {
    console.log('worker returned: ', e.data);
  };
</script>

Run

Results:

Spec

onmessage / 'message' event

listener(event : Event) : undefined

Called when Worker.postMessage() is called. event.data contains the message passed to postMessage().

Example:

<!-- In this example, the background thread squares
     numbers and returns them to the main thread. -->
<script id='code' type='text/plain'>
  onmessage = function(event) {
    postMessage(event.data * event.data);
  };
</script>
<script>
  var code = document.getElementById('code').textContent;
  var blob = new Blob([code], { type: 'application/javascript' });
  var url = URL.createObjectURL(blob);
  var worker = new Worker(url);
  worker.onmessage = function(e) {
    console.log('worker returned: ', e.data);
  };
  worker.postMessage(2);
  worker.postMessage(12);
  worker.postMessage(30);
</script>

Run

Results:

onoffline / 'offline' event

listener(event : Event) : undefined

Fired when the browser loses network connection.

Spec

ononline / 'online' event

listener(event : Event) : undefined

Fired when the browser gains network connection.

Spec

home license contribute feedback