HTML5 Web Workers可以在Firefox 4中工作，但不能在Chrome 12.0.742.122中工作

HTML5 Web Workers work in Firefox 4, but not in Chrome 12.0.742.122

本文关键字：工作 Chrome 但不能 Web Workers Firefox HTML5      更新时间：2023-09-26

当我尝试在HTML5中使用Web Workers功能时，我的firefox工作得很好，但chrome抱怨:

Uncaught TypeError: Cannot call method 'postMessage' of undefinedxstartWorkerworker.html:7(匿名函数onclickworker.html: 2

worker.html 

<button onclick="xstartWorker()">Start worker</button>
<output id="result"></output>
<script>
function xstartWorker()
{
  worker.postMessage({'cmd': 'startWorker', 'msg': 'Start now!'});
}
var worker = new Worker('worker.js');
worker.addEventListener('message', function(e)
  {
      document.getElementById('result').textContent = e.data;
  }
  , false);
</script>

worker.js 

self.addEventListener('message', function(e)
{
  var data = e.data;
  switch (data.cmd)
  {
    case 'startWorker':
      self.postMessage('worker thread start now:' + data.msg);
      break;
    default:
      self.postMessage('default');
  }
}
, false);

我能做些什么使它在chrome中工作?

顺便说一句，当我在http://playground.html5rocks.com/#inline_workers上试用样本时这次chrome可以工作了，但是firefox抱怨

错误:worker is undefinedhttp://playground.html5rocks.com/Line: 39

我猜你想在本地机器上运行这个，而不是在web服务器上。工人受到同源政策的限制，但正如链接的维基百科页面所指出的，

同源检查和相关机制的行为不是在许多极端情况下定义良好，例如对于协议没有明确定义的主机名或端口与其关联url (file:， data:，等).

加载本地文件，即使有相对URL，也与使用file:协议加载文件相同。所以我的猜测是，问题是你试图加载worker.js作为本地文件- Chrome不喜欢这样(出于一些良好的安全原因)，尽管你可以通过启动Chrome这样强制问题:chrome.exe --allow-file-access-from-files

或者，尝试在本地或远程web服务器上提供脚本，看看是否可以解决问题。(如果您安装了Python，您可以转到相关目录并运行python -m SimpleHTTPServer 8000，然后在浏览器中转到http://localhost:8000/)。

Chrome可以在没有--allow-file-access-from-files的情况下本地使用worker。worker需要以blob的形式加载。

的例子:

<body>
    <button>Start</button>
    <div id="output"></div>
    <script id="worker_1" type="text/js-worker">
        importScripts(base_url + '/worker_lib2.js');
        function run(event) {
            var msg = event.data;
            this.postMessage({ answer: hello(event.data.name)});
        }
        this.addEventListener('message', run, false);
    </script>
    <script>
        var base_url = window.location.href.replace(/''/g,'/').replace(/'/[^'/]*$/, '');
        var array = ['var base_url = "' + base_url + '";' + $('#worker_1').html()];
        var blob = new Blob(array, {type: "text/javascript"});
        $('button').click(function() {
            var url = window.URL.createObjectURL(blob);
            console.log(url);
            var worker = new Worker(url);
            worker.addEventListener('message', function(event) {
                $('#output').html(event.data.answer);
            }, false);
            worker.postMessage({
                name: 'Yannis'
            });
        });
    </script>
</body>

文件worker_lib2.js: 

function hello(msg) {
    return 'Hello... ' + msg;
}
相关文章：