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制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
css图片自适应大小
2007/11/28 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
nodejs async异步常用函数总结(推荐)
2017/11/17 NodeJs
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
介绍一下Python中webbrowser的用法
2013/05/07 面试题
最新教师自我评价分享
2013/11/12 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
个人股份合作协议书
2014/10/24 职场文书
实习指导教师评语
2014/12/30 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python