jan*_*ith 9 javascript firefox html5 google-chrome
当我尝试在HTML5中使用Web Workers功能时,我的firefox工作愉快,但chrome抱怨:
未捕获的TypeError:无法调用未定义的方法'postMessage'xstartWorkerworker.html:7(匿名函数)worker.html:1 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未定义源文件:http: //playground.html5rocks.com/ Line:39
我猜你试图在本地机器上运行它,而不是在网络服务器上运行.工作人员受同源政策的限制,但正如链接的维基百科页面所述,
在许多极端情况下,相同来源检查和相关机制的行为没有明确定义,例如对于没有明确定义的主机名或与其URL关联的端口的协议(文件:,数据:等等). ).
加载本地文件(即使使用相对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.工作人员需要作为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;
}