Question

我想在线创建Web worker而不是引用外部脚本（这样我就可以部署单个HTML页面而不是HTML文件和JS文件）。我使用Blobs here在线找到了一个很酷的方法，但由于某些原因我无法使用它。我也注意到该文章的评论部分也有不同的结果。

我收到错误：Failed to load resource: the server responded with a status of 404 (Not Found)错误在线：localhost:63342/[object%20Worker]:1

我猜测网络工作者真的不是问题，它是在创建临时网址资源吗？如果是这样我还缺少什么？

这是我的代码，在HTML文件的脚本标记中：

function createWorker(fn) {
    var blob = new Blob(['self.onmessage = ', fn.toString()], { type: 'text/javascript' });
    var url = window.URL.createObjectURL(blob);

    return new Worker(url);
}

var generic = function(e) {
    self.postMessage('in line web worker code');
};

var worker = createWorker(generic);

if (window.Worker) {
    var getEquipmentW = new Worker(worker);

    getEquipmentW.postMessage({
        msg: 'hi'
    });

    getEquipmentW.onmessage = function (e) {
        console.log(e.data);
    };
}

Answer 1

您的函数createWorker已经返回一个worker，因此您可以替换：

var worker = createWorker(generic);
var getEquipmentW = new Worker(worker);

有了这个：

var getEquipmentW = createWorker(generic);

Answer 2

我将回答我自己的问题，您可以在单独的script标签中包含Web Worker。我认为该脚本类型不是官方的，因此该标记中的代码要到以后才进行评估。看起来像这样：

<script id="myWorkerCode" type="javascript/worker">

self.onmessage = function(e) {
    const data = e.data
    self.postMessage('received some data in worker thread');
};
</script>

然后，在需要工作人员的脚本中，创建一个Blob，并将内容分配为“ javascript”类型。使Blob成为您可以输入到Worker构造函数中的URL：

if(window.Worker) {
            // select the id of the script that contains your worker code
            const blob = new Blob([
                document.querySelector('#myWebWorker').textContent
            ], {type: "text/javascript"})

            // Note: window.webkitURL.createObjectURL() in Chrome 10+.
            const worker = new Worker(window.URL.createObjectURL(blob));

            worker.onMessage = (e) => {
               console.log('received data in main thread')
            };
        }

它比“ inline”更像是“一行上”，但是它允许Web Worker在同一文件中组合和使用。诀窍是使用脚本标记，并通过将脚本标记分配给上面代码中的给定类型来转换未评估的javascript。仍然不是最优雅的解决方案，但是在将进程推到另一个线程时非常方便。

Web工作者内联而不是获取另一个页面

2 个答案: