html5 worker 实例(一) 为什么测试不到效果


Posted in HTML / CSS onJune 24, 2013

很多人在测试worker api的时候,总是会出现异常,根本测试不到效果。
在使用worker的时候有个必须注意的地方,就是单纯的文本文件是实现不了worker的,你写的实际代码 必须部署到服务器(tomcat.jBoss等)才能运行worker api。
下面写个简单例子

js代码test.js(worker)

复制代码
代码如下:

function messageHandler(e) {
postMessage("worker says: " + e.data + " too");
}
addEventListener("message", messageHandler, true);
postMessage("2222222222");

html代码 index.html

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<script type="text/javascript">
if(typeof(Worker)!=="undefined"){
console.log("zhichi worke");
}else{
console.log("no support!");
}
function messageHandler(e){
console.log(e.data);
}
function errorHandler(e){
console.log(e.message, e);
}
var myWorker = new Worker("task.js");
myWorker.addEventListener("message", messageHandler, true);
myWorker.addEventListener("error", errorHandler, true);
myWorker.postMessage("1 fangsong d");
</script>
</body>
</html>

不是之后直接访问index.html页面,然后在浏览器的console面板中将看到worker发送的字符串(实际应用中一般使用json传送)。
HTML / CSS 相关文章推荐
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 #HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 #HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 #HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 #HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 #HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 #HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 #HTML / CSS
You might like
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python3 replace()函数使用方法
2018/03/19 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
python实现关闭第三方窗口的方法
2019/06/28 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
Python中有几个关键字
2020/06/04 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
python使用smtplib模块发送邮件
2020/12/17 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
教师实习自我鉴定
2013/12/18 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
团组织关系介绍信
2019/06/24 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书