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学习