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. LeetCode "419. Battleships in a Board"

    The follow-up question is fun: "Could you do it in one-pass, using only O(1) extra memory and w ...

  2. knockoutJS学习笔记05：控制文本和外观绑定

    测试数据: function Person(name,age){ var self = this; self.name = ko.observable(name); self.age = ko.obs ...

  3. 【腾讯GAD暑期训练营游戏程序班】游戏中的设计模式作业说明文档

  4. 图解Javascript原型链

    本文尝试阐述Js中原型(prototype).原型链(prototype chain)等概念及其作用机制.上一篇文章(图解Javascript上下文与作用域)介绍了Js中变量作用域的相关概念,实际上关 ...

  5. UIDynamic-附着行为:UIAttachmentBehavior

    直接上代码: // // YFAttachmentBehaviorViewController.m // BigShow1949 // // Created by apple on 16/8/25. ...

  6. a版本冲刺第一天

    队名:Aruba   队员: 黄辉昌 李陈辉 林炳锋 鄢继仁 张秀锋 章  鼎 学号 昨天完成的任务 今天做的任务 明天要做的任务 困难点 体会 408 学习测试文档的编写 继续学习并借鉴,开始着手写 ...

  7. jsp中iframe填充装个页面

    首先要引入这个css,由于我之前没有引入这个,导致iframe的高度一只是默认高度,没有改变 <style type="text/css"> body, html { ...

  8. Configure Security Settings for Remote Desktop(RDP) Services Connections

    catalogue . Configure Server Authentication and Encryption Levels . Configure Network Level Authenti ...

  9. NGUI Tween动画Scale与Transform冲突

    NGUI中我们要同时完成Scale与Transform的效果,会发现动画并不是同我们想的那样运行的. 原因就是Tween Scale与Tween Transform的冲突调用. Tween Scale ...

  10. CocoaPods第三方库管理 iOS

    越来越多的SVN管理,越来越多的工程文件,我不能总是那么一个一个的把第三方库拖进去,我厌倦了拖拽和配置,我找到了替代方法--CocoaPods 补充一下:最近在给新机子安装时 发现 sudo gem ...