SharedWorker接口代表一种特定类型的工作者,可以从几个浏览上下文中访问,例如几个窗口,内联框架或甚至工作者。它们实现一个不同于专门工作者的接口,并具有不同的全局作用域, SharedWorkerGlobalScope 。
 

注意:如果要使共享进程可以连接到多个不同的页面,这些页面必须属于相同的域(相同的协议,主机以及端口);

注意:在火狐中,共享进程不能在私有与公共文档间进行共享。

构造函数

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

属性

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

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

方法

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

示例

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

下面的代码展示了如何通过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 event的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.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support 4 29.0 (29.0) 未实现 10.60 5
未实现 6.1
Feature Android Chrome for Android Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Safari Mobile
Support 未实现 未实现 33.0 (33.0) 2.1 未实现 11.5 5.1
未实现 7.1

更多

文档标签和贡献者

此页面的贡献者: ceido, xgqfrms-GitHub, zhengxinxin
最后编辑者: ceido,