我想用用户脚本加载共享 worker 。问题是用户脚本是免费的，并且没有用于托管文件的商业模式——我也不想使用服务器，即使是免费服务器来托管一个小文件。不管怎样，I tried it我(当然)得到了同源策略错误:

Uncaught SecurityError: Failed to construct 'SharedWorker': Script at
'https://cdn.rawgit.com/viziionary/Nacho-Bot/master/webworker.js'
cannot be accessed from origin 'http://stackoverflow.com'.

There's another way通过将 worker 函数转换为字符串然后转换为 Blob 并将其作为 worker 加载来加载 web worker，但我也尝试过:

var sharedWorkers = {};
var startSharedWorker = function(workerFunc){
    var funcString = workerFunc.toString();
    var index = funcString.indexOf('{');
    var funcStringClean = funcString.substring(index + 1, funcString.length - 1);
    var blob = new Blob([funcStringClean], { type: "text/javascript" });
    sharedWorkers.google = new SharedWorker(window.URL.createObjectURL(blob));
    sharedWorkers.google.port.start();
};

这也行不通。为什么？因为共享 worker 是根据加载其 worker 文件的位置共享的。自 createObjectURL generates a unique file name for each use ，工作人员永远不会拥有相同的 URL，因此永远不会被共享。

我该如何解决这个问题？

Note: I tried asking about specific solutions, but at this point I think the best I can do is ask in a more broad manner for any solution to the problem, since all of my attempted solutions seem fundamentally impossible due to same origin policies or the way URL.createObjectURL works (from the specs, it seems impossible to alter the resulting file URL).

That being said, if my question can somehow be improved or clarified, please leave a comment.

最佳答案

您可以使用 fetch() 、 response.blob() 从返回的 Blob URL 创建一个 application/javascript 类型的 Blob ；将 SharedWorker() 参数设置为 Blob URL 创建的 URL.createObjectURL() ；利用 window.open() ，新打开的 load 的 window 事件定义先前在原始 SharedWorker 定义的相同 window ，将 message 事件附加到新打开的 SharedWorker 的原始 window 。

javascript 在 How to clear the contents of an iFrame from another iFrame 的 console 上进行了尝试，其中当前问题 URL 应该加载到新的 tab 和 message 从打开 window 到在 worker.port.postMessage() 记录的 console 事件处理程序。

当使用 window 从新打开的 message 发布时，打开 window 也应该记录 worker.postMessage(/* message */) 事件，类似于打开 window

window.worker = void 0, window.so = void 0;

fetch("https://cdn.rawgit.com/viziionary/Nacho-Bot/master/webworker.js")
  .then(response => response.blob())
  .then(script => {
    console.log(script);
    var url = URL.createObjectURL(script);
    window.worker = new SharedWorker(url);
    console.log(worker);
    worker.port.addEventListener("message", (e) => console.log(e.data));
    worker.port.start();

    window.so = window.open("https://stackoverflow.com/questions/" 
                            + "38810002/" 
                            + "how-can-i-load-a-shared-web-worker-" 
                            + "with-a-user-script", "_blank");

    so.addEventListener("load", () => {
      so.worker = worker;
      so.console.log(so.worker);
      so.worker.port.addEventListener("message", (e) => so.console.log(e.data));
      so.worker.port.start();
      so.worker.port.postMessage("hi from " + so.location.href);
    });

    so.addEventListener("load", () => {
      worker.port.postMessage("hello from " + location.href)
    })

  });

然后您可以在任一 console 的 tab 中使用，例如； at How to clear the contents of an iFrame from another iFrame worker.postMessage("hello, again") at new window of current URL How can I load a shared web worker with a user-script? , worker.port.postMessage("hi, again"); where message events attached at each window ，两个 window 之间的通信可以使用在初始 URL 创建的原始 SharedWorker 来实现。

关于javascript - 如何使用用户脚本加载共享网络 worker ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38810002/