SharedWorker

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

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

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

属性

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对象,该对象可以用来进行通信和对共享进程进行控制。

构造

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

方法

Inherits methods from its parent, EventTarget, and implements properties 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.

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

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

规范

Specification Status Comment
WHATWG HTML Living Standard
SharedWorker
Living Standard No change from Web Workers.

浏览器兼容性

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

更多

文档标签和贡献者

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