SharedWorker

SharedWorker interface represents a specific kind of worker that can be accessed from several browsing contexts, such as several windows, iframes or even workers. They implement an interface different than dedicated workers and have a different global scope, SharedWorkerGlobalScope .

注意: If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host and port).

构造函数

SharedWorker()
Creates a shared web worker that executes the script at the specified URL.

特性

Inherits properties from its parent, EventTarget , and implements properties from AbstractWorker .

AbstractWorker.onerror
Is an EventListener that is called whenever an ErrorEvent of type error bubbles through the worker.
SharedWorker.port 只读
返回 MessagePort object used to communicate with and control the shared worker.

方法

Inherits methods from its parent, EventTarget , and implements methods from AbstractWorker .

范例

In our Basic shared worker example ( run shared worker ), we have two HTML pages, each of which uses some JavaScript to perform a simple calculation. The different scripts are using the same worker file to perform the calculation — they can both access it, even if their pages are running inside different windows.

The following code snippet shows creation of a SharedWorker object using the SharedWorker() constructor. Both scripts contain this:

var myWorker = new SharedWorker('worker.js');
					

Both scripts then access the worker through a MessagePort object created using the SharedWorker.port property. If the onmessage event is attached using addEventListener, the port is manually started using its start() method:

myWorker.port.start();
					

When the port is started, both scripts post messages to the worker and handle messages sent from it using port.postMessage() and port.onmessage , respectively:

first.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}
second.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}
myWorker.port.onmessage = function(e) {
  result1.textContent = e.data;
  console.log('Message received from worker');
}
					

Inside the worker we use the SharedWorkerGlobalScope.onconnect handler to connect to the same port discussed above. The ports associated with that worker are accessible in the connect event's ports property — we then use MessagePort start() method to start the port, and the onmessage handler to deal with messages sent from the main threads.

onconnect = function(e) {
  var port = e.ports[0];
  port.addEventListener('message', function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  });
  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
}
					

规范

规范 状态 Comment
HTML Living Standard
The definition of 'SharedWorker' in that specification.
实时标准 No change from 未知 .

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
SharedWorker Chrome 4 Edge 79 Firefox 29 IE No Opera 10.6 Safari 5 — 6.1 WebView Android No Chrome Android No Firefox Android 33 Opera Android 11 — 14 Safari iOS 5.1 — 7 Samsung Internet Android 4.0 — 5.0
SharedWorker() 构造函数 Chrome 4 Edge 79 Firefox 29 IE No Opera 10.6 Safari 5 — 6.1 WebView Android No Chrome Android No Firefox Android 33 Opera Android 11 — 14 Safari iOS 5.1 — 7 Samsung Internet Android 4.0 — 5.0
port Chrome 4 Edge 79 Firefox 29 IE No Opera 10.6 Safari 5 — 6.1 WebView Android No Chrome Android No Firefox Android 33 Opera Android 11 — 14 Safari iOS 5.1 — 7 Samsung Internet Android 4.0 — 5.0

图例

完整支持
完整支持
不支持
不支持

另请参阅