Web　Workerを利用したプログラムが実行できない。

○仕様：Web Workerを利用して、10000以下の7の倍数を求めるプログラム作成。

○環境：
ローカルのchrome環境で下記のプログラムを実行しましたが、
計算ボタンを押下すると以下のようなエラーが出て計算できません。

○エラー内容：
form.js:4 Uncaught DOMException: Failed to construct 'Worker': Script at 'file:///D:/blog/javascript/js/worker.js' cannot be accessed from origin 'null'.
at HTMLInputElement.<anonymous> (file:///D:/blog/javascript/js/form.js:4:18)

補足）javascriptのフォルダパスはあっていると思います。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5<title>計算</title>
6</head>
7<body>
8  <form>
9    <input id="target" type="number" value="100000" />以下：
10    <input id="x" type="number" value="7" />の倍数の個数＝
11    <span id="result">-</span>
12  </form>
13  <br>
14  <input id="btn" type="button" value="計算">
15<script type="text/javascript" src="D:/blog/javascript/js/form.js"></script>
16</body>
17</html>
18

Javascript
1document.addEventListener('DOMContentLoaded',function(){
2  document.getElementById('btn').addEventListener('click',function(){
3
4    var worker = new Worker('D:/blog/javascript/js/worker.js');
5    //the pass of the file
6
7    worker.postMessage({
8      'target':document.getElementById('target').value,
9      'x':document.getElementById('x').value
10    });
11    document.getElementById('result').textContent='計算中...';
12
13    worker.addEventListener('message',function(e){
14      document.getElementById('result').textContent=e.data;
15    },false);
16
17    worker.addEventListener('error',function(e){
18      document.getElementById('result').textContent = e.message;
19    },false);
20  },false);
21},false);
22

JacaScript
1self.addEventListener('message',function(e)){
2  var = count = 0;
3  for (var i = 1,len = e.data.target;i < len; i++){
4    if (i%e.data.x === 0){count++;}
5  }
6  postMessage(count);
7}
8

行動規範の内容に同意します

回答1件

ベストアンサー

サーバーにアップして使用しないと、Chromeではローカルで（そのままでは）使用できません。

【Web Worker を使用する | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Using_web_workers#Browser_notes

Chrome/Opera は、Worker をローカルで実行しようとすると "Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'." というエラーが発生します。

投稿2019/01/07 13:54