时间戳

首页 > 解决方案 > 网络工作者内联而不是获取另一个页面

javascript - 网络工作者内联而不是获取另一个页面

问题描述

我想在线创建网络工作者而不是引用外部脚本（这样我就可以部署单个 HTML 页面而不是 HTML 文件和 JS 文件）。我在这里使用 Blobs 在网上找到了一个很酷的方法，但由于某种原因，我无法让它工作。我也注意到那篇文章的评论部分的结果好坏参半。

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

我猜网络工作者并不是真正的问题，它是在创建临时 url 资源？如果是这样，我还想念什么？

这是我的代码，在 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);
    };
}

标签： javascripturlblobweb-worker

解决方案

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.getElementById('myWorkerCode').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 : ')
        console.log( e.data );
    };
}

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

推荐阅读