HTML通信

  1. 跨文档消息传输
    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>

    效果

  2. Web Socket通讯
    请参考我的另一篇博客，只是不用自己封装服务器了，现在很多web server都支持websocket了，如IIS7、Tomcat、Apache、Resin、Nginx等等。

多线程

  1. 创建线程

    在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>

    效果

  2. 线程中可使用的变量、函数与类
    • 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向服务器发送和接收消息。
  3. 终止 Web Worker
    当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法

    w.terminate();

HTML5之通信和多线程的更多相关文章

  1. HTML5 Socket通信

    HTML5 Socket通信使用起来也是相当不从的,先将部分JS代码与大家分享: var socket; function connect() { var host = "ws://&quo ...

  2. Linux下socket通信和多线程

    服务端socket流程:socket() –> bind() –> listen() –> accept() –> 读取.发送信息(recv,send等) 客户端socket流 ...

  3. HTML5触屏版多线程渲染模板技术分享

    前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...

  4. HTML5 web workes实现多线程

    对多线程来说尽量使用HTML5的WEB WORKER特性 HTML5中的Web Worker是使用多个线程并发执行Javascript程序.另外,这种特别的多线程实现能减少困惑开发者多年的,在其他平台 ...

  5. Html5之web workers多线程

    Web Workers 是 HTML5 提供的一个javascript多线程解决方式,我们能够将一些大计算量的代码交由web Worker执行而不冻结用户界面. 1.首先看一个实例: 1)js文件(t ...

  6. Delphi Socket通信及多线程编程总结

    http://cxhblog.blog.sohu.com/41930676.html 一.Socket通信: Delphi在ScktComp单元中对WinSock进行了封装,该单元提供了TAbstra ...

  7. 线程同步、死锁和通信——Java多线程（二）

    一.多线程同步 上一篇随笔中,我曾遇到对多线程程序的多次运行结果不一致的情况,这主要是因为没有对这些线程在访问临界资源做必要的控制,而接下来就用线程的同步来解决这个问题. 1.同步代码块 class ...

  8. python-进程之间通信、多线程介绍

    一.进程之间通信 进程的任务有三种状态:运行,就绪,阻塞. 加锁可以让多个进程修改同一块数据时,同一时间只能由一个任务可以进行修改,即串行的修改.牺牲了速度,保证了数据安全. 虽然可以使用文件共享数据 ...

  9. C，通信，多线程，数据库小练习——在线电子词典第一版

    #ifndef FILE_H #define FILE_H #include<stdio.h> #include<sys/types.h> #include<sys/so ...

随机推荐

  1. html 5 本地数据库（Web Sql Database）核心方法openDatabase、transaction、executeSql 详解

    Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome. Firefox.Opera等主流浏览器都已经支持Web ...

  2. spring 里面的StringUtils，先放这儿，有时间研究吧

    /* * Copyright 2002-2012 the original author or authors. * * Licensed under the Apache License, Vers ...

  3. Java线程：线程中断

    interrupt方法可以用来请求终止线程. 当对一个线程调用interrupt方法时,线程的中断状态被置位.这时每个线程都有boolean标志.每个线程都应该不时的检查这个标志,以判断线程是否被中断 ...

  4. 关于如何正确地在android项目中添加第三方jar包

    在android项目中添加第三方jar包虽然不是一个很复杂的问题,但是确实给很多开发者带来了不小的困扰.我自己就曾经碰到过calss not found exception.error inflati ...

  5. ARC使用小结

    内存管理基本原则 内存管理的依循下面的基本原则 自己生成的对象,那么既是其持有者 不是自己生成的对象,也可成为其持有者(一个对象可以被多个人持有) 如果不想持有对象的时候,必须释放其所有权 不能释放已 ...

  6. 蓝桥网试题 java 基础练习 数列特征

    ----------------------------------- Collections.sort(list);是个好东西 但是要学会排列 然后你才能浪 -------------------- ...

  7. 免越狱tweak应用逆向开发

    对于已越狱的设备,系统默认安装了mobilesubstrate动态库,提供一个系统级的入侵管道,所有的tweak都可以依赖它来进行开发.而对于没有越狱的手机,我们需要向目标app注入libsubstr ...

  8. 笑谈ArcToolbox (2) 开启ArcToolbox的钥匙

    笑谈ArcToolbox (2) 开启ArcToolbox的钥匙 by 李远祥 GIS人遇到ArcToolbox就像找到了宝藏一样兴奋,但并不是每个找到宝藏的人都具备开启宝藏的钥匙.有时候功能强大并不 ...

  9. Java中Redis简单入门

    Redis是一个开源的,先进的 key-value 存储可用于构建高性能,可扩展的 Web 应用程序的解决方案. Redis官方网网站是:http://www.redis.io/,如下: Redis ...

  10. css3 3D效果

    css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...