Widely available Supported across all major browsers. Safe to use in production.

postMessage

The postMessage() method of the DedicatedWorkerGlobalScope interface sends a message to the main thread that spawned it.

This accepts a data parameter, which contains data to copy from the worker to the main thread. The data may be any value or JavaScript object handled by the structured clone algorithm, which includes cyclical references.

The method also accepts an optional array of transferable objects to transfer to the main thread; Unlike the data parameter transferred objects are no longer usable in the worker thread. (Where possible, objects are transferred using a high performance zero-copy operation).

The main scope that spawned the worker can send back information to the thread that spawned it using the Worker.postMessage method.

Messaging and Workers

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
postMessage
4
12
3.5
4
18
5
message_event

The message event is fired on a DedicatedWorkerGlobalScope object when the worker receives a message from its parent (i.e., when the parent sends a message using Worker.postMessage()).
4
12
3.5
4
18
5
MessageEvent

The MessageEvent interface represents a message received by a target object.
2
12
3
4
18
3.2
data

The data read-only property of the MessageEvent interface represents the data sent by the message emitter.
2
12
3
4
18
3.2
lastEventId

The lastEventId read-only property of the MessageEvent interface is a string representing a unique ID for the event.
2
17
3
4
18
3.2
MessageEvent

The MessageEvent() constructor creates a new MessageEvent object.
16
14
26
6
18
6
origin

The origin read-only property of the MessageEvent interface is a string representing the origin of the message emitter.
2
12
3
4
18
3.2
source

The source read-only property of the MessageEvent interface is a MessageEventSource (which can be a WindowProxy, MessagePort, or ServiceWorker object) representing the message emitter.
2
12
3
4
18
3.2
message_event

The message event is fired on a Window object when the window receives a message, for example from a call to Window.postMessage() from another browsing context.
60
12
9
4
60
4
postMessage

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.
2
12
3
4
18
3.2
message_event

The message event is fired on a Worker object when the worker's parent receives a message from its worker (i.e., when the worker sends a message using DedicatedWorkerGlobalScope.postMessage()).
4
12
3.5
4
18
5
postMessage

The postMessage() method of the Worker interface sends a message to the worker. The first parameter is the data to send to the worker. The data may be any JavaScript object that can be handled by the structured clone algorithm.
2
12
3.5
4
18
5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
  • Firefox 8 and up supports sending `File` and `FileList` objects between windows. This is only allowed if the recipient's principal is contained within the sender's principal for security reasons.
  • Before Firefox 6, the `message` parameter must be a string. Since Firefox 6, the `message` parameter is serialized using the structured clone algorithm. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself.

Syntax

JAVASCRIPT 
onmessage = (e) => {
  console.log("Message received from main script");
  const workerResult = `Result: ${e.data[0] * e.data[1]}`;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};

Use cases

  • Using postMessage

    The postMessage() method of the DedicatedWorkerGlobalScope interface sends a message to the main thread that spawned it.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links