javascript - 执行来自不同来源的 Web Worker

Question

我正在开发一个库，我想将其托管在 CDN 上。该库将用于跨多个服务器的许多不同域。该库本身包含一个脚本(现在我们称之为 script.js)，它加载一个 Web Worker (worker.js)。

加载库本身非常简单:只需添加 <script type="text/javascript" src="http://cdn.mydomain.com/script.js"></script>标记到我想要使用该库的域 (www.myotherdomain.com)。但是，由于库正在从 http://cdn.mydomain.com/worker.js 加载工作人员new Worker('http://cdn.mydomain.com/worker.js') ，我得到一个 SecurityException。 cdn.mydomain.com 上启用了 CORS。

对于 Web Worker，不允许在远程域上使用 Web Worker。使用 CORS 不会有帮助:浏览器似乎会忽略它，甚至不执行预检检查。

解决此问题的方法是执行 XMLHttpRequest 来获取工作程序的源，然后创建 BLOB url 并使用此 url 创建工作程序。这适用于 Firefox 和 Chrome。但是，这似乎不适用于 Internet Explorer 或 Opera。

解决方案是将工作程序放置在 www.myotherdomain.com 上或放置一个代理文件(只需使用 XHR 或 importScripts 从 CDN 加载工作程序)。但我不喜欢这个解决方案:它要求我在服务器上放置额外的文件，并且由于该库在多个服务器上使用，因此更新会很困难。

我的问题由两部分组成:

1. 是否可以在 IE 10+ 的远程源上部署工作人员？
2. 如果是情况 1，如何最好地处理跨浏览器工作？

Answer 1

最好的可能是动态生成一个简单的工作脚本，它将在内部调用 importScripts() ，不受此跨域限制的限制。

要了解为什么不能使用跨域脚本作为 Worker 初始化脚本，请参阅 this answer 。基本上，Worker 上下文将把自己的原点设置为该脚本之一。

// The script there simply posts back an "Hello" message
// Obviously cross-origin here
const cross_origin_script_url = "https://greggman.github.io/doodles/test/ping-worker.js";

const worker_url = getWorkerURL( cross_origin_script_url );
const worker = new Worker( worker_url );
worker.onmessage = (evt) => console.log( evt.data );
URL.revokeObjectURL( worker_url );

// Returns a blob:// URL which points
// to a javascript file which will call
// importScripts with the given URL
function getWorkerURL( url ) {
  const content = `importScripts( "${ url }" );`;
  return URL.createObjectURL( new Blob( [ content ], { type: "text/javascript" } ) );
}