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的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 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
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
javascript cookies操作集合
2010/04/12 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
js仿360开机效果
2019/12/26 Javascript
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
上海某公司.net方向笔试题
2014/09/14 面试题
家长给小学生的评语
2014/01/30 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
求职简历自荐信
2014/06/18 职场文书
解放思想演讲稿
2014/09/11 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
小学运动会开幕词
2016/03/04 职场文书
高质量“欢迎词”
2019/04/03 职场文书