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学习的更多相关文章

  1. 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  2. 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  3. 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

    <数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...

  4. 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

    HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...

  5. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  6. (转)HTML5开发学习（2）:本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

  7. (转)HTML5开发学习（3）:本地存储之Web Sql Database

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(3):本地存储之Web Sql Data ...

  8. HTML5 例子学习 HT 图形组件

    HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心 ...

  9. html5开发学习 html5自学需要怎么学

    记得很多大鳄都说过一句话:只要站在风口上,猪都能飞起来.而对于如今的IT技术领域来说,无疑这只幸运的"猪"非html5莫属.html5开发技术在16年迎来了一个飞跃的发展,这也让很 ...

随机推荐

  1. 解决ppt中视频不能播放的问题

    小伙伴一直在纠结一个问题,有个ppt,在其他人的电脑上可以正常播放其中的视频,但是在某一个电脑上却总是不能播放,一直没找到原因,俺们今早捯饬了一下,貌似找到一丢丢原因和解决办法了. #1,疑似原因 为 ...

  2. 【笔记6】用pandas实现条目数据格式的推荐算法 (基于物品的协同)

    ''' 基于物品的协同推荐 矩阵数据 说明: 1.修正的余弦相似度是一种基于模型的协同过滤算法.我们前面提过,这种算法的优势之 一是扩展性好,对于大数据量而言,运算速度快.占用内存少. 2.用户的评价 ...

  3. Spring.Net 简单入门学习

    Spring.NET IoC容器的用法. 通过简单的例子学习Spring.Net 1.先创建一个控制台程序项目. 2.添加IUserInfoDal 接口. namespace Spring.Net { ...

  4. 【javascript】箭头函数

    ES6标准新增了一种新的函数:Arraw Function(箭头函数). x => x * x 这个函数相当于 function (x){ return x * x; } 题外话:user st ...

  5. 深夜重温JavaScript中的对象和数组

    这一块实际上已经学过了,因为没有学好,在工作过程中遇到一些对象或者数组的操作,会去百度查找,浪费了许多宝贵的时间,所以特地再拐过头来重新学习. 对象 基本概念: 对象这种基本的数据结构还有其他很多种叫 ...

  6. <<< Tomcat运行报错IOException while loading persisted sessions: java.io.EOFException

    解决方法:将work下面的文件清空,主要是*.ser文件,或者只是删除掉session.ser即可以解决.

  7. 【转载】Java反射: 数组

    原创链接:http://czj4451.iteye.com/blog/1479486 java.lang.reflect.Array Java反射机制通过Array类来处理数组,结合java.lang ...

  8. CFBundleVersion与CFBundleShortVersionString，上架注意事项

    CFBundleVersion,标识(发布或未发布)的内部版本号.这是一个单调增加的字符串,包括一个或多个时期分隔的整数. CFBundleShortVersionString  标识应用程序的发布版 ...

  9. Matlab中double,im2double,mat2gray区别

    转载:http://blog.sina.com.cn/s/blog_6c41e2f30101559d.html ****************假设某图像数据A(uint8格式)*********** ...

  10. 线程安全的无锁RingBuffer的实现

    这里的线程安全,是指一个读线程和一个写线程,读写两个线程是安全的,而不是说多个读线程和多个写线程是安全的.. 在程序设计中,我们有时会遇到这样的情况,一个线程将数据写到一个buffer中,另外一个线程 ...