SharedWorker | Web API

在此页

构造函数
特性
方法
范例
规范
浏览器兼容性
另请参阅
相关话题

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()

特性

继承的特性来自其父级， EventTarget ，和实现的特性来自 AbstractWorker .

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

方法

继承方法来自其父级 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 对象使用 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() 方法：

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.
}

规范

规范	状态	注释
HTML 实时标准 The definition of 'SharedWorker' in that specification.	实时标准	无变化自未知 .

浏览器兼容性

The compatibility table on 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
`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

在此页

构造函数

特性

方法

范例

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题