在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

postMessage() 方法在 Worker interface sends a message to the worker's inner scope. This accepts a single parameter, which is the data to send to the worker. The data may be any value or JavaScript object handled by the structured clone algorithm, which includes cyclical references.

Worker can send back information to the thread that spawned it using the DedicatedWorkerGlobalScope.postMessage 方法。

句法

worker.postMessage(message, [transfer]);
					

参数

message

The object to deliver to the worker; this will be in the data field in the event delivered to the DedicatedWorkerGlobalScope.onmessage handler. This may be any value or JavaScript object handled by the structured clone algorithm, which includes cyclical references.

若 message 参数为 not provided, a TypeError will be thrown. If the data to be passed to the worker is unimportant, null or undefined can be passed explicitly.

transfer 可选

An optional array of Transferable objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable ( neutered ) in the context it was sent from and becomes available only to the worker it was sent to.

Transferable objects are instances of classes like ArrayBuffer , MessagePort or ImageBitmap objects that can be transferred. null is not an acceptable value for transfer .

返回

Void.

范例

The following code snippet shows the creation of a Worker 对象使用 Worker() constructor. When either of two form inputs ( 第一 and second ) have their values changed, change events invoke postMessage() to send the value of both inputs to the current worker.

var myWorker = new Worker('worker.js');
first.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}
second.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}
					

For a full example, see our Basic dedicated worker example ( run dedicated worker ).

注意 : postMessage() can only send a single object at once. As seen above, if you want to pass multiple values you can send an array.

Transfer Example

This example shows a Firefox add-on that transfers an ArrayBuffer from the main thread to the ChromeWorker ，然后 ChromeWorker transfers it back to the main thread.

Main thread code:

var myWorker = new ChromeWorker(self.path + 'myWorker.js');
function handleMessageFromWorker(msg) {
    console.log('incoming message from worker, msg:', msg);
    switch (msg.data.aTopic) {
        case 'do_sendMainArrBuff':
            sendMainArrBuff(msg.data.aBuf)
            break;
        默认：
            throw 'no aTopic on incoming message to ChromeWorker';
    }
}
myWorker.addEventListener('message', handleMessageFromWorker);
// Ok lets create the buffer and send it
var arrBuf = new ArrayBuffer(8);
console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength);
myWorker.postMessage(
    {
        aTopic: 'do_sendWorkerArrBuff',
        aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below
    },
    [
        arrBuf // The array buffer we created 9 lines above
    ]
);
console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);
					

Worker code

self.onmessage = function (msg) {
    switch (msg.data.aTopic) {
        case 'do_sendWorkerArrBuff':
                sendWorkerArrBuff(msg.data.aBuf)
            break;
        默认：
            throw 'no aTopic on incoming message to ChromeWorker';
    }
}
function sendWorkerArrBuff(aBuf) {
    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
}
					

Output logged

arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
arrBuf.byteLength post transfer: 0                             bootstrap.js:42
from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
incoming message from worker, msg: message { ... }             bootstrap.js:20
got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2
					

byteLength goes to 0 as it is transferred. To see a full working example of this Firefox demo add-on see here: GitHub :: ChromeWorker - demo-transfer-arraybuffer

规范

规范	状态	注释
HTML 实时标准 The definition of 'Worker.postMessage()' in that specification.	实时标准

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
postMessage	Chrome Yes	Edge 12	Firefox Yes	IE 10 10 Internet Explorer does not support Transferable 对象。	Opera 47	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android 44	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

完整支持

见实现注意事项。

[1] Internet Explorer does not support Transferable 对象。

另请参阅

• Worker interface it belongs to.

元数据

• 最后修改： Aug 21, 2020

相关话题

1. Web 工作者 API
2. Worker
3. 构造函数

   1. Worker()
4. 特性

   1. onerror
   2. onmessage
   3. onmessageerror
5. 方法

   1. postMessage()
   2. terminate()
6. 事件

   1. message
   2. messageerror
7. 继承：

   1. EventTarget
8. Web 工作者 API 相关页面

   1. AbstractWorker
   2. ChromeWorker
   3. DedicatedWorkerGlobalScope
   4. ServiceWorker
   5. SharedWorker
   6. SharedWorkerGlobalScope
   7. WorkerGlobalScope
   8. WorkerLocation
   9. WorkerNavigator