SharedWorker - Web API 接口参考 编辑

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.

浏览器兼容性

BCD tables only load in the browser

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.

更多

• Worker
• 使用 web worker