Web Worker进行数据交换

最新推荐文章于 2024-05-01 12:51:21 发布

luckyrass

最新推荐文章于 2024-05-01 12:51:21 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/luckyrass/article/details/27839225

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在浏览器中利用Web Workers实现计数功能，并解决了由于同源策略导致的本地文件访问限制问题。通过将代码部署到服务器，实现了跨域访问，确保了网页应用的正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo_workers.js

var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

Worker.html

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button οnclick="startWorker()">Start Worker</button>
<button οnclick="stopWorker()">Stop Worker</button>
<br /><br />

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

在实际访问时，出现

chrome javascript Uncaught SecurityError: An attempt was made to break through the security policy of the user agent

错误，原因是引用了本地的 demo_workers.js文件，在本地文件系统中访问文件时，chrome会限制同源策略

解决方案是：

把代码放到服务器上，通过网络访问
设置chrome，取消同源限制，方法有多种，首先要关闭已经打开的chrome浏览器
1. 命令行进入到chrome.exe目录，通过命令行启动chrome并传递命令行参数：chrome --disable-web-security
2. 第二种方法是选中chrome.exe右键：创建快捷方式，选中快捷方式，右键：属性，点击快捷方式选项卡，找到目标栏，在后面添加-args -disable-web-security 得到类似这样的字符串："C:\Program Files\Google\Chrome\Application\chrome.exe" -args -disable-web-security 点击确定，以后从这个快捷方式打开的chrome就没有了同源限制