百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML5通信和多线程详细教程及实例
分享本文到:

HTML5通信和多线程详细教程及实例

发布时间:01/15 来源: 浏览: 关键词:
本文讲解的是HTML5通信和多线程详细教程,里面附实例代码参考。HTML5提供了在网页文档之间相互接收和发送信息的功能。

HTML通信

跨文档消息传输

HTML5提供了在网页文档之间相互接收和发送信息的功能,使用这个功能,只要获取到网页所在窗口对象的实例,不仅同源(域+端口)的网页可以相互通信,甚至可以实现跨域通信。涉及到两个window的API,window的message事件

 代码如下
window.addEventListener("message",function(ev){...},false)
//或
window.onmessage=function(ev){....}



其中ev是MessageEvent对象,它的其中几个属性:data:是消息内容,timeStamp:时间戳,origin:来源URL地址,source:来源窗口对象。
另一个就是window对象的postMessage方法了:

 代码如下

otherWindow.postMessage(data,targetOrigin)



其中data是消息文本,targetOrigin是对象窗口的URL地址(如"http://10.9.146.113:8026/"),可以在URL使用通配符“*”。otherWindow是窗口对象,可以是windows.open返回的对象,或通过window.frames数组指定的序号(index)或名字获取的单个frame所属的窗口对象。

示例:主页面是“http://10.9.146.113:8098/mytest/index.html”,和嵌入它的frame页面“http://10.9.146.113:8026/index.html”进行通讯,前者HTML代码:

 代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试本地缓存</title>
</head>
 
<body>
<table>
<tr><td valign="top">
http://10.9.146.113:8098/mytest/index.html<br>
<textarea name="msg" cols="50" rows="5" id="msg">爱我中华,爱我中华</textarea><br>
<input type="button" name="button" id="button" onClick="sendMsg()" value="发送">
<div id="msginfo">接收到的信息:</div>
</td><td valign="top">
<iframe style="width:300px" height="300px" src="http://10.9.146.113:8026/index.html"></iframe>
</td>
</table>
</body>
</html>
<script type="text/javascript">
function sendMsg(){
var msg=document.getElementById("msg").value;
var iframe=window.frames[0];
iframe.postMessage(msg,"http://10.9.146.113:8026/");   
}
//也可以用监听的方式
window.onmessage=function(ev){
document.getElementById("msginfo").innerHTML+="<br>"+ev.data;
};
</script>



后者

 代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>通信API</title>
</head>
 
<body>
http://10.9.146.113:8026/index.html</p>
<div id="msginfo">接收到的信息:</div>
</body>
</html>
<script type="text/javascript">
window.addEventListener("message",function(ev){
document.getElementById("msginfo").innerHTML+="<br>"+ev.data;
ev.source.postMessage("已经收到",ev.origin);
});
</script>

 

效果

HTML5通信和多线程详细教程及实例


Web Socket通讯

请参考我的另一篇博客:http://www.oseye.net/user/kevin/blog/78,只是不用自己封装服务器了,现在很多web server都支持websocket了,如IIS7、Tomcat、Apache、Resin、Nginx等等。

多线程


创建线程

在HTML5中增加了一个Web Workers API,通过它可以实现Web平台的多线程,你可以将耗时过长的处理交给后台线程(HTML5中称为worker)运行,从而解决HTML5之前因为某个处理耗时过长而跳出一个提示,导致用户不得不结束或关闭浏览器的尴尬局面。

创建后台线程非常简单,只需要在Worker类构造器中奖需要在后台运行线程执行的脚本件的URL地址作为参数,然后创建Worker对象就可以了,如

 代码如下
var worker=new Worker('worker.js');



后台线程是不能访问页面或窗口对象的,因此需要前台和后台互传数据,这有点类似上面的文档消息传输,接收通过onmessage事件,发送通过postMessage方法。

示例:后台脚本是worker.js,代码如下:

 代码如下

onmessage=function(ev){
var num=ev.data;
var res=1;
for(var i=0;i<10;i++){
res*=num;
}
postMessage(res);   
}



前台是index.html页面,代码如下:

 代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试多线程</title>
</head>
 
<body>
<input type="text" id="num" value="0" size="5"> 的10次方=<span id="res">0</span>
<br>
<input type="button" name="button" id="button" value="计算" onClick="getRes()">
</body>
</html>
<script type="text/javascript">
function getRes(){
var worker=new Worker('worker.js');
var num=document.getElementById("num").value;
//发送数据的到后台
worker.postMessage(num);
//时间触发接受数据
worker.onmessage=function(ev){
document.getElementById("res").innerHTML=ev.data;
}
}
</script>



效果

HTML5通信和多线程详细教程及实例


线程中可使用的变量、函数与类

self:表示本线程范围内的作用域;
postMessage(message),向创建线程的源窗口发送消息;
onmessage,获取接收消息的事件处理函数;
importScripts(urls),导入其它javascript脚本文件,参数为该文件的url地址,可以导入多个脚本文件,导入的文件必须与使用该线程的文件在同一个域、同一个端口中,如

 代码如下
importScripts('script1.js','js/script2.js')



navigator对象,与window.navigator对象类似;
sessionStorage/localStorage,可以在线程中使用Web Storage;
XMLHttpRequest,可以在线程中处理Ajax;
Web Workers,可以在线程中嵌套线程;
setTimeout()/setInterval(),可以在线程中实现实时处理;
close(),结束本线程;
eval()、isNaN()、escape()可以使用js的核心函数;
object,可以穿件和使用本地对象;
WebSockets,可以使用WebSocket API向服务器发送和接收消息。

终止 Web Worker

当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法

 代码如下

w.terminate();

 

责任编辑:
打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有8人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

订阅获得更多模板