Web Worker执行时抛出404错误

Question

我的项目结构看起来像：

js
  /client.js
  /script1.js
  /webWoker.js
node_modules
.gitignore
index.html

也将其包含在内。

<script type="text/javascript" src="js/script1.js"></script>
<script type="text/javascript" src="js/client.js"></script>
<script type="text/javascript" src="js/webWoker.js"></script>

我的 script1.js 文件看起来像这样

if (window.Worker) {
    console.log("uri: " + document.documentURI);
    var myWorker = new Worker("myworker.js");
    myWorker.postMessage("hello");
    console.log(myWorker);

    myWorker.onmessage = function (e) {
        result.textContent = e.data;
        console.log('Message received from worker: ' + result.textContent);
    };
}

我的 webWorker.js 看起来像这样

onmessage = function (e) {
    console.log('Message received from main script');
    var result = "#27ae60";
    console.log('Posting message back to main script');
    postMessage(result);
};

我在这个项目中使用node.js，并通过npm start运行它。当我在浏览器中运行时，我看到：

script1.js:81 GET http://localhost:8080/webWorker.js 404 (Not Found)
execute @ script1.js:81
img.onload @ script1.js:64

这里出了什么问题？

- daydreamer

Answer 1

您不必在主页面中包含工作线程脚本（甚至是一个坏主意），但是您传递给new Worker(URI)的URI相对于当前documentURI。

因此，在您的情况下，应该是new Worker("/js/webWorker.js");。

- Kaiido

---

scipt1.js:81 GET http://localhost:8080/webWorker.js 404 (Not Found)。即使我更改了路径并将其从html文件中删除，我仍然会得到这个错误。 - daydreamer

你好 @Kaiido，即使 /js/webWorker.js 似乎也不起作用。我已经更新了我的问题，并提供了 index.html 的路径。 - daydreamer

那么，相对路径 /js/webWorker.js 应该指向 http://localhost:8080/js/webWorker.js，我不明白这里发生了什么... 如果你尝试从同一文件夹中加载图像会怎样呢：var img = new Image(); img.onload = _=>console.log('path is correct'); img.src = '/js/someFile.png';？如果你输入绝对路径会怎样？(new Worker('http://localhost:8080/js/webWorker.js'))。如果删除所有浏览器插件/用户脚本等会怎样。 - Kaiido

new Worker('http://localhost:8080/js/webWorker.js') 正常工作，但奇怪的是，当我将其更改为 new Worker('js/webWorker.js') 时，它也开始工作了。 - daydreamer

@oshan2csd 这是指 <script type="text/javascript" src="js/webWoker.js"></script>。这意味着他们的工作脚本可能是多语言的，可以从主上下文和工作程序中执行，这意味着它可能不太容易阅读，或者它会抛出一个错误。 - Kaiido