如何使用用户脚本加载共享Web worker？ [英] How can I load a shared web worker with a user-script?

问题描述

我想使用用户脚本加载共享工作者。问题是用户脚本是免费的，并且没有托管文件的商业模式 - 我也不想使用服务器，甚至是免费服务器来托管一个小文件。无论如何，我试过了，我（当然）得到了同一来源政策错误：

I want to load a shared worker with a user-script. The problem is the user-script is free, and has no business model for hosting a file - nor would I want to use a server, even a free one, to host one tiny file. Regardless, I tried it and I (of course) get a same origin policy error:

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

还有另一种方法通过将worker函数转换为字符串然后转换为Blob并将其作为worker添加来加载Web worker，但我也尝试过：

There's another way to load a web worker by converting the worker function to a string and then into a Blob and loading that as the worker but I tried that too:

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();
};

这也不起作用。为什么？因为共享工作者是共享，因为它们是从其加载工作文件的位置。自 createObjectURL 为每次使用生成一个唯一的文件名，工人永远不会拥有相同的URL，因此永远不会被共享。

And that doesn't work either. Why? Because shared workers are shared based on the location their worker file is loaded from. Since createObjectURL generates a unique file name for each use, the workers will never have the same URL and will therefore never be shared.

如何解决这个问题？

注意：我试过询问具体的解决方案，但在这一点上，我认为
我能做的最好是以更广泛的方式询问任何
解决问题的方案，因为我尝试的所有解决方案似乎都是
由于相同的原始政策或
URL.createObjectURL 的工作原理，基本上是不可能的（来自规范，似乎不可能
改变生成的文件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（）创建类型 application / javascript的 Blob URL 来自返回的 Blob ;将 SharedWorker（）参数设置为 Blob URL 由创建URL.createObjectURL（）;利用 window.open（），加载新开启窗口的事件定义先前在原始窗口中定义的 SharedWorker ，附上消息在新打开的窗口 c> c> s的事件到原始 SharedWorker 。

You can use fetch(), response.blob() to create an Blob URL of type application/javascript from returned Blob; set SharedWorker() parameter to Blob URL created by URL.createObjectURL(); utilize window.open(), load event of newly opened window to define same SharedWorker previously defined at original window, attach message event to original SharedWorker at newly opened windows.

javascript 在<$ href =https://stackoverflow.com/questions的 console 上尝试过/ 33645685 / how-to-to-an-iframe-from-another-iframe />如何清除来自另一个iFrame的iFrame的内容，其中应加载当前的问题URL在新的标签，打开消息从开始窗口到 worker.port.postMessage（）事件处理程序记录在 console 。

javascript was tried at console at How to clear the contents of an iFrame from another iFrame, where current Question URL should be loaded at new tab with message from opening window through worker.port.postMessage() event handler logged at console.

打开窗口还应在发布时记录消息事件从新打开的窗口使用 worker.postMessage（/ * message * /），类似于打开 window

Opening window should also log message event when posted from newly opened window using worker.postMessage(/* message */), similarly at opening 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 at tab 然后你可以使用，例如;在如何清除内容来自另一个iFrame的iFrame worker.postMessage（你好，再次）在新的窗口当前URL 如何加载共享带有用户脚本的web worker？， worker.port.postMessage（hi，again）; where message 每个窗口附加的事件，两个窗口之间的通信可以使用原始<$ c来实现$ c> SharedWorker 在初始网址创建。

At console at either tab you can then use, e.g.; 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(" again"); where message events attached at each window, communication between the two windows can be achieved using original SharedWorker created at initial URL.

这篇关于如何使用用户脚本加载共享Web worker？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！