详解HTML5中的Communication API基本使用方法

1.跨文档消息通信
跨文档消息通信可以确保iframe、标签页、窗口间安全地进行跨源通信。它把postmessage api定义为发送消息的标准方式。利用postmessage发送消息非常简单，代码如下所示：
chatframe.contextwindow.postmessage('hello,world','http://www.example.com');
接收消息时仅需在页面种增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。
消息事件是一个拥有data(数据)和origin(源)属性的dom事件。data属性是发送方传递的实际消息，而origin属性是发送来源。
postmessage api不仅可以胜任同源文档间的通信，而且在浏览器不允许非同源通信的情况下，postmessage api也很有用。鉴于它的一致性和易用性，在同源文档间通信时也推荐使用postmessage。在javascript环境的通信中始终应使用postmessage api，例如使用html5 web worker通信时。
1.1 理解源安全
html5荣光引入源（origin）的概念对域安全进行了阐明和改进。源是在网络上用来建立信任关系的地址的子集。源由规则（scheme）、主机（host）、端口（post）组成。
源的概念中不考虑路径。
html5定义了源的序列化。源在api和协议中以字符串的形式出现。
postmessage的安全规则确保了消息不会被传递到非预期的源页面中。当发送消息时，由发送方制定接收方的源。如果发送方用来调用postmessage的窗口不具有特定的源（例如用户跳转到了其他站点），浏览器就不会传送消息。
类似地，接受消息的时候，发送方的源也被作为消息的一部分。为避免伪造，消息源由浏览器提供。接收方可以决定处理哪些消息，以及忽略哪些消息。我们可以保留一份白名单，告诉浏览器仅仅处理可信源的消息。
最好永远不要对来自第三方的字符串求值。再者，要避免使用eval方法处理应用内部字符串。可以通过window.json或者json,.org解析器使用json。
1.2 跨文档消息通信的浏览器支持情况
常用的做法是检测xmlhttprequest对象中是否存在withcredentials属性：

javascript code复制内容到剪贴板

1. 　　var xhr = new xmlhttprequest(); if (typeof xhr.withcredentials === undefined) { //不支持跨源的xmlhttprequest } else { //支持跨源的xmlhttprequest }  

1.3 使用postmessage api
提示 html5定义的messageevent接口也是html5 websockets和html5 webworkers的一部分。html5的通信功能用用于接受消息的api与messageevent接口是一致的。其他通信类api，如eventsource api和web workers，也都是使用messageevent接口来传递消息。
1.4 使用postmessage api创建应用
发送消息
　　通过调用目标页面window对象中的postmessage()函数可发送消息，代码如下：
　　

javascript code复制内容到剪贴板

1. window.postmessage("hello, world", "porta");  

　　第一个参数包括要发送的数据，第二个参数是消息传送的目的地。要发送消息给iframe，可以再相应iframe的contentwindow中调用postmessage，代码如下：
　　

javascript code复制内容到剪贴板

1. document.getelementsbytagname("iframe")[0].contentwindow.postmessage("hello, world", "cha");  

监听消息事件
　　接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时，通过检查消息的来源来决定是否对这条消息进行处理。
　　

javascript code复制内容到剪贴板

1. window.postmessage("hello, world", "porta");  

　　消息事件是一个拥有data（数据）和origin（源）属性的dom事件。data属性是发送方传递的实际消息，而origin属性是发送来源。
　　源由规则（scheme）、主机（host）、端口（port）组成。
　　例如：由于规则不同（如https与http），所以页面与页面的源是不同的。
　　源的概念中不考虑路径。如：与只是路径不同，他们是相同的源。
　　源在api和协议中以字符串的形式出现。
　　

javascript code复制内容到剪贴板

1. var originwhitelist = ["porta", "game", ""]; function checkwhitelist(origin) { for (var i=0; i<originwhitelist.length; i++) { if (origin === originwhitelist[i]) { return true; } } return false; } function messagehandler(e) { if (checkwhitelist(e.origin)) { processmessage(e.data); } else { //忽略来自未知源的消息 } }  

　　postmessage api可以适用于同源和非同源通信，鉴于它的一致性，在同源文档间通信时也推荐适用postmessage。
2 xmlhttprequest level2
作为xmlhttprequest的改进版，xmlhttprequest level2在功能上有了很大的改进。主要集中在两个方面：
（1）跨源xmlhttprequests;
（2）进度事件（progress events）
2.1 跨源xmlhttprequst
xmlhttprequestlevel2通过cors（cross origin resource sharing，跨源资源共享）实现了跨源xmlhttprequests。
跨源http请求包括一个origin头部，拓为服务器提供http请求的源信息。头部由浏览器保护，不能被应用程序代码修改。从本质上讲，它与跨文档消息通信中消息事件的origin属性作用相同。
cors规范要求，对一些敏感行为——如申请证书的请求或除了get和post以外的options预检（preflight）请求，必须由浏览器发送给服务器，以确定这种行为能否被支持和允许，这意味着成功通信的背后或许需要由具备cors出了能力的服务器来支持。
2.2 进度事件
新版xmlhttprequest中最重要的api改进之一是增加了对进度的响应。
xmlhttprequest level2用了一个有意义的名字progress进度来命名进度事件。
3 进阶功能
3.1 结构化的数据
早期版本的postmessage仅支持字符串。后来的版本支持javascript对象、canvas imagedata和文件等其他数据类型。由于不同浏览器对规范支持的差异，对不同的对象类型的支持情况也不同。
3.2 framebusting
framebusting技术可以用来保证某些内容不被加载到jframe中。应用程序首先检测其所在的窗口是否为最外层的窗口（window.top），若不是则跳脱包含它的框架，代码如下所示：

javascript code复制内容到剪贴板

1. if(window!=window.top)   
2. {   
3. window.top.location=location;   
4. }  

3.3二进制数据
　　支持新的二进制api（如typed array）的浏览器可以用xmlhttprequest来发送二进制数据。level 2规范支持调用send()方法发送blob和arraybuffer对象
　　

xml/html code复制内容到剪贴板

1. var a = new uint8array([8,6,7,5,3,0,9]); var xhr = new xmlhttprequest(); xhr.open("post", "/data/", true); console.log(a); xhr.send(a.buffer);  

　　xmlhttprequest level 2也会公开二进制响应数据。将responsetype属性值设置为text、document、arraybuffer或blob来控制 有response属性返回的对象类型。如果想要查看http响应体包含的原始字节，需要将responsetyper属性值设为arraybuffer或blob。