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. [web建站] 极客WEB大前端专家级开发工程师培训视频教程

    极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...

  2. python基础-文件操作

    一.文件操作 打开文件时,需要指定文件路径和以何等方式打开文件,打开后,即可获取该文件句柄,日后通过此文件句柄对该文件操作. 打开文件的模式有: r ,只读模式[默认模式,文件必须存在,不存在则抛出异 ...

  3. Debian8搭建php环境

    安装apache 新装的系统发现 apt-get install apach<tab> 没有自动补全 请查看 这里 apt-get install apache2 安装mysql apt- ...

  4. BZOJ 3223: Tyvj 1729 文艺平衡树

    3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 3628  Solved: 2052[Submit][Sta ...

  5. 【BZOJ-1570】BlueMary的旅行 分层建图 + 最大流

    1570: [JSOI2008]Blue Mary的旅行 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 388  Solved: 212[Submit ...

  6. Linux 远程复制文件

    Linux 远程复制文件 如果想把机器A上面的dir目录下面的所有文件复制到机器B的dir目录下,我们可以使用nc命令来完成 在机器A的dir目录下面执行: tar -czf - * | nc -l ...

  7. HTTP协议 -- 认清协议常用状态码

    HTTP协议作为web服务的基础,理所应当受到重视,但是周围的同事能够讲清楚HTTP协议的凤毛麟角.既然是基础,就应该早一点掌握,所以近半年(2016-2月——2016年6月),不准备学习新技术了.首 ...

  8. Jquery ui widget开发

    Jquery ui 提供了一些基本的widget,但是他提供了很好的机制来创建widget.在jquery css framework中包含了基本的css样式(视觉和感觉诸如颜色,字体大小,图标等), ...

  9. linux下常见解压缩命令

    linux下常见的压缩文件格式有tar.gz.tar.gz.tar.bz2.zip等等.对于不同的压缩文件格式有对应的解压缩命令.下面就对此小结一下: 1.后缀为.tar 用 tar –xvf 解压 ...

  10. SDL鼠标事件

    鼠标事件有这么多种,手柄的可以忽视,Sdl.SDL_KEYDOWN,Sdl.SDL_KEYUP,Sdl.SDL_MOUSEMOTION,Sdl.SDL_MOUSEBUTTONDOWN,Sdl.SDL_ ...