html5 Worker学习
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 线程交互例子</title>
<script type="text/javascript" src="mainthread.js"> </script>
</head>
<body>
<input type="text" id="inputedInteger" />
<input type="button" value="点击让主线程把这个数值发送给后台线程1" onclick="html5Worker()" /> <p id="result"></p> </body> </html>
mainthread.JS
function html5Worker() {
//判断浏览器是否支持
if (typeof (Worker) == "undefined") {
console.log("对不起你的浏览器不支持worker");
return;
}
//创建web worker实例
var worker1 = new Worker("thread1.js");
var integerInput = document.getElementById("inputedInteger").value;
var num = parseInt(integerInput, 10);
//跨文档消息传输Cross Document Messaging。
//postMessage发送消息给thread1
worker1.postMessage(num + "我是主线程的值我将发送给thread1 ");
//onmessage事件监听器
//当 web worker 传递消息时，会执行事件监听器中的代码。event.data 中存有来自 event.data 的数据。
worker1.onmessage = function (event) {
//取得从后台线程1(thread1)信息
var data = event.data;
var worker2 = new Worker("thread2.js");
worker2.postMessage(data + " 我是主线程的值我将发送给thread2");
worker2.onmessage = function (event) {
document.getElementById("result").innerHTML = event.data;
}
};
}
thread1.js
onmessage = function (event) {
var result = event.data + " 我是thread1接收的值我将返回 ";
console.log("thread1");
//把这个requst发送回主线程 (也就是创建这个worker1的线程）
postMessage(result);
}
thread2.js
onmessage = function(event) {
// 获取从主线程传来的数据
var result = event.data + " 我是thread2接收的值我将返回";
console.log("thread2");
//把这个result发送回主线程 (也就是创建这个worker2的线程）
postMessage(result);
}
运行结果：
注意的是要发布到服务器才能运行否则出现：
Uncaught SecurityError: Failed to construct 'Worker': Script at 'xxxxthread1.js' cannot be accessed from origin 'null'.
总结 ：
1：创建worker实例并传递对应的js文件
2：发送消息 postMessage()
3：监听消息 onmessage
4：停止terminate()方法
5：onerror错误异常
监听消息也可以用下列方式.
//google 或者ie方式注册事件
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', messageChange, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', messageChange);
}
html5 Worker学习的更多相关文章
- 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
- 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
- HTML5 CSS3学习
HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍: http://www.html5cn.com.cn/news/gdt/2 ...
- (转)HTML5开发学习（2）:本地存储之localStorage 、sessionStorage、globalStorage
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...
- (转)HTML5开发学习（3）:本地存储之Web Sql Database
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...
- HTML5 例子学习 HT 图形组件
HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...
- html5开发学习 html5自学需要怎么学
记得很多大鳄都说过一句话:只要站在风口上,猪都能飞起来.而对于如今的IT技术领域来说,无疑这只幸运的"猪"非html5莫属.html5开发技术在16年迎来了一个飞跃的发展,这也让很 ...
随机推荐
- jquery鼠标右键事件
$('body').live("mousedown",function(e){ $('body').bind("contextmenu",function(e) ...
- Android5.0资源 colorAccent,colorPrimary,colorPrimaryDark
- python 列表 总结
在python里创建列表和字典非常简单,这里总结一下它们的常用方法 1.创建列表 myArry = ["one", "two", "three&quo ...
- JS/CSS缓存杀手——VS插件
背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)! 一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...
- 2.0（3）MongoDB数据导入导出
——————(1)数据导出———————— 导出为JSON格式 mongoexport -d '数据库' -c '表名' -o ***.json 导出为csv mongoexport -d '数据库' ...
- TCP/IP协议
1.为什么有了IP地址还需要MAC地址? 首先,数据或者信息在网络上的传输需要两个地址:目的地址和下一跳地址.其中IP地址就是目的地址,而MAC地址则是下一跳地址.目的地址在经过路由器转发的时候是不会 ...
- .eww
http://sourceforge.net/projects/ezwinports/files/ 下载libxml2的文件. 再下载的bin里复制libiconv-2.dll和libxml2-2.d ...
- VB.net Wcf事件广播（订阅、发布）
这篇东西原写在csdn.net上,最近新开通了博客想把零散在各处的都转移到一处. 一.源起 学WCF有一段时间了,可是无论是微软的WebCast还是其他网上的教程,亦或我购买的几本书中,都没有怎么 ...
- JS写小游戏（一）：游戏框架
前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...
- elk系列8之logstash+redis+es的架构来收集apache的日志
preface logstash--> redis --> logstash --> es这套架构在讲究松耦合关系里面是最简单的, 架构图如下: 解释下这个架构图的流程 首先前端lo ...