SharedWorker

SharedWorker 接口代表一种特定类型的 worker,可以从几个浏览上下文中访问,例如几个窗口、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口,具有不同的全局作用域, SharedWorkerGlobalScope 。

注意:如果要使 SharedWorker 连接到多个不同的页面,这些页面必须是同源的(相同的协议、host 以及端口)。

构造函数

SharedWorker()
创建一个执行指定 url 脚本的共享 web worker。

属性

继承自其父类 EventTarget,并实现 AbstractWorker 中的属性 。

AbstractWorker.onerror
一个 EventListener,当 ErrorEvent 类型的 error 冒泡到 worker 时触发。
SharedWorker.port 只读
返回一个 MessagePort 对象,该对象可以用来进行通信和对共享 worker 进行控制。

方法

继承自其父类 EventTarget,并实现 AbstractWorker 中的方法 。

示例

在这个 shared worker 例子中 ( 运行 shared worker), 我们有两个 HTML 页面, 每个页面中使用一些 JavaScript 来执行简单的计算。 这些脚本使用相同的 shared worker 来执行计算 — 都可以访问这个 worker,即使脚本在不同窗口的两个页面内运行。

下面的代码展示了如何通过 SharedWorker() 方法来创建一个共享进程对象。

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

然后两个脚本都通过 MessagePort 对象来访问worker,这个对象用SharedWorker.port 属性获得。如果已经用 addEventListener 监听了 onmessage 事件,则可以使用 start() 方法手动启动端口:

myWorker.port.start();

当启动端口时,两个脚本都会向 worker 发送消息, 然后使用 port.postMessage()和 port.onmessage 处理从 worker 返回的消息:

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');
  }

在 worker 中我们使用 SharedWorkerGlobalScope.onconnect 处理程序连接到上面讨论的相同端口。可以在 connect 事件的 ports 属性中获取到与该 worker 相关联的端口 — 然后我们使用 MessagePort start() 方法来启动端口,然后 onmessage 处理程序处理来自主线程的消息。

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

规范

Specification Status Comment
HTML Living Standard
SharedWorker
Living Standard No change from Unknown.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
SharedWorkerChrome Full support 4Edge Full support 79Firefox Full support 29IE No support NoOpera Full support 10.6Safari No support 5 — 6.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 33Opera Android No support 11 — 14Safari iOS No support 5.1 — 7Samsung Internet Android No support 4.0 — 5.0
SharedWorker() constructorChrome Full support 4Edge Full support 79Firefox Full support 29IE No support NoOpera Full support 10.6Safari No support 5 — 6.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 33Opera Android No support 11 — 14Safari iOS No support 5.1 — 7Samsung Internet Android No support 4.0 — 5.0
portChrome Full support 4Edge Full support 79Firefox Full support 29IE No support NoOpera Full support 10.6Safari No support 5 — 6.1WebView Android No support NoChrome Android No support NoFirefox Android Full support 33Opera Android No support 11 — 14Safari iOS No support 5.1 — 7Samsung Internet Android No support 4.0 — 5.0

Legend

Full support  
Full support
No support  
No support

更多