web worker的使用

最新推荐文章于 2024-04-16 10:49:57 发布
最新推荐文章于 2024-04-16 10:49:57 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xufeiayang/article/details/53398027
版权


Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///F:/Test/project/worker.js' cannot be accessed from origin 'null'.

想必会有不少的同僚遇到过这个问题，就是上面的报错，web worker的功能用法网上也是一搜一大把，那么我就不说这些东西了，给大家讲解一些我今天遇到的这个错误吧，这是测试的时候在开发者工具查看就会显示的错误信息。

web worker必须在站上测试放在本地文件里是不会运行的，你设置一些IIs或者wamp服务器就可以了！

淡水河桥
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
针对HTML5的Web Worker使用攻略
09-28
主要介绍了针对HTML5的Web Worker使用攻略,特别是结合worker拿手的JS使用起来十分有效,需要的朋友可以参考下
Javascript Web Worker使用过程解析
10-15
主要介绍了Javascript Web Worker使用过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
qiankun微前端子应用加载 vue-pdf 时产生跨域问题.
最新发布
weixin_69656067的博客
04-16 827
报错描述: Failed to construct 'Worker': Script at xxx cannot be accessed from origin xxx。
cannot be accessed from origin ‘null‘
Judy18的博客
08-29 721
可以在本地启动一个tomcat服务，放在上面运行就可以了，或者在其他浏览器比如firefox，ie（注意ie版本）使用worker执行js代码，chrome浏览器安全机制导致，不允许在本地直接运行，它会当作跨域访问。...
win10下的IIS信息管理器及建立测试站点
兴华的博客
11-11 7146
win10中的IIS安装及配置
使用worker报错：Uncaught DOMException: Failed to construct ‘Worker’: Script at***
AzeShinja的博客
06-22 3871
解决跨域worker文件读取报错的一种场景
让chrome支持本地Ajax请求,Ajax请求status cancel Origin null is not allowed by Access-Control-Allow-Origin
Full Stack
11-22 5486
一般情况下，在chrome中运行一些含Ajax请求的界面原型时，会抛出下面错误：  办法一: XMLHttpRequest cannot load file:///D:/eclipse/workspace/uiTest/WebContent/table1.html. Origin null is not allowed by Access-Control-Allow-Origin. 
js多线程new worker报错cannot be accessed from origin 问题
facing-screen's blog
11-22 4561
---- Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建，Web Workers 就可以通过 postMessage 向任务池发送任务请求，执行完之后再通过 postMessage 返回消息给创建者指定的事件处理程序 ( 通过 onmessage 进行捕获 )。more》 ---- 错误： Uncaught DOMException: ...
Uncaught DOMException: Failed to construct ‘Worker‘报错怎么解决！
小学弟的博客
09-10 6380
Uncaught DOMException: Failed to construct 'Worker'报错怎么解决！
Worker-Promise.js:Web Worker 简单和承诺（使用 Q）库
06-20
这是一个用于内联定义 Web Worker 任务的实用程序。 它使用 Promise（）。 一个简单的例子是： var add = SimpleWorker ( function ( a , b ) { return a + b ; } ) ; var promise = add ( 1 , 2 ) ; promise ....
谷歌浏览器web worker出现cannot be accessed from origin "null"错误
u011927449的博客
05-14 1600
cannot be accessed from origin 'null'百度翻译是：无法从原点“null”访问 在别的浏览器都可以，而在唯独在谷歌浏览器不行，查找了一些资料原因大概就是谷歌浏览器安全机制导致的，不允许在本地直接运行，它会当作跨域访问了。 解决方法：电脑搭建本地服务器，然后通过本地服务器访问，例如wamp。 要不然就用其他浏览器吧。 ...
html5.js不起作用,html5 worker 实例(一) 为什么测试不到效果
weixin_39632891的博客
06-10 201
很多人在测试worker api的时候，总是会出现异常，根本测试不到效果。在使用worker的时候有个必须注意的地方，就是单纯的文本文件是实现不了worker的，你写的实际代码 必须部署到服务器(tomcat.jBoss等)才能运行worker api。下面写个简单例子js代码test.js(worker)复制代码代码如下:function messageHandler(e) {postMessa...
通过插件本地html跑webWorker
qq_45670042的博客
08-29 1221
会出现上述现象的原因是因为worker遵循同源协议，我们在本地打开的页面采用的是file协议。这也是很多学习的例子都使用vue或者其他框架去展示worker的用法，其实都是利用了webpack集成的devServer，相当于在本地开了一个服务器。但是在学习web worker的时候用框架难免觉得有点麻烦。...
web worker js
Future1994的博客
07-23 1181
转自：https://zhidao.baidu.com/question/752826254306699004.html 虽然是个百度答案 但是感觉 分析的十分透彻 易懂 大神 拜服！ 一、关于Web Worker HTML5几个优势特性里，就包括了Web Worker，这货可以了解为多线程，正常形况下，浏览器执行某段程序的时候会阻塞直到运行结束后在恢复到正常状态，而HTML5的Web...
初步了解超图两种3D客户端 - iClient3D for_WebGL 和 iClient3D for_Plugin
bcbobo21cn的专栏
11-05 658
接此文； https://blog.csdn.net/bcbobo21cn/article/details/109441803 下载插件安装； 安装完之后，从realspace点进去，出来的是这些；不知道是啥； 然后看一下超图的下载列表；有两种iClient3D客户端；下载下来看一下； 不知道这二者有何区别；来看一下； 看一下webGL这个，里面有很多例子； 我的超图服务是iserver8C；先启动； 打开webGL例子看一下；例子都有下图错误； 超图...
HTML5规范之Web Worker入门
aty
10-27 8949
在web worker规范产生之前，dom渲染和javascript代码执行是在同一个浏览器线程中执行的。也就是说：渲染dom的时候不能执行javascript代码，执行javascript代码的时候，UI界面会暂停响应。如果javascript代码执行时间很长，那么UI就会无响应，这就是所谓的页面卡死。Web Workers是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些耗时的javascript代码交由web Worker运行而不冻结用户界面。也就是说web worker和U
qiankun+vue 适配vue-pdf踩坑
ygxyvip的博客
08-16 2840
vue项目线上预览pdf可用vue-pdf完美解决，可是加上qiankun微前端后就变成巨坑了。 引入vue-pdf后，前台直接报错加载不了worker(failed to resolve async component default:securityerror:failed to construct‘worker’:script at xxxx.worker.js xannot be accessed from origin xxx )，如果直接访问单个项目则可以正常使用，结合网上多部分资料才得以解决，
webworker使用
06-03
Web Worker 的使用可以分为以下几个步骤： 1. 创建 Worker 对象：在主线程中使用 new Worker() 方法创建一个 Worker 对象。Worker 构造函数接受一个 JavaScript 脚本的 URL 作为参数，这个 URL 指向的脚本将在新的 Worker 线程中执行。 2. 监听消息：在主线程中，可以使用 Worker 对象的 onmessage 属性来监听从 Worker 线程中发送过来的消息。当 Worker 线程发送一条消息时，主线程的 onmessage 事件会触发。 3. 发送消息：在主线程中，可以使用 Worker 对象的 postMessage() 方法来向 Worker 线程发送消息。postMessage() 方法接受一个参数，表示要发送的消息内容。 4. 在 Worker 线程中处理消息：在 Worker 线程中，可以使用 self 对象来监听从主线程中发送过来的消息。当主线程发送一条消息时，Worker 线程的 onmessage 事件会触发。 5. 发送消息到主线程：在 Worker 线程中，可以使用 postMessage() 方法向主线程发送消息。 需要注意的是，由于 Web Worker 会在后台运行，因此它无法访问 DOM，也无法操作页面上的元素。在 Worker 线程中，可以使用 importScripts() 方法加载其他 JavaScript 文件。此外，还需要注意的是，由于 Web Worker 只能在同源环境下运行，因此必须将 Worker 脚本放在与主页面同源的位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值