今天小编跟大家讲解下有关详解HTML5中的Communication API基本使用方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关详解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复制内容到剪贴板 varxhr=newXMLHttpRequest();if(typeofxhr.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复制内容到剪贴板 window.postMessage("Hello,world","porta"); 第一个参数包括要发送的数据 第二个参数是消息传送的目的地。要发送消息给iframe 可以再相应iframe的contentWindow中调用postMessage 代码如下： Javascript Code复制内容到剪贴板 document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello,world","cha");监听消息事件 接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时 通过检查消息的来源来决定是否对这条消息进行处理。 Javascript Code复制内容到剪贴板 window.postMessage("Hello,world","porta"); 消息事件是一个拥有data（数据）和origin（源）属性的DOM事件。data属性是发送方传递的实际消息 而origin属性是发送来源。 源由规则（scheme）、主机（host）、端口（port）组成。 例如：由于规则不同（如https与http） 所以页面与页面的源是不同的。 源的概念中不考虑路径。如：与只是路径不同 他们是相同的源。 源在API和协议中以字符串的形式出现。 Javascript Code复制内容到剪贴板 varoriginWhiteList=["porta","game",""];functioncheckWhiteList(origin){for(vari=0;i<originWhiteList.length;i++){if(origin===originWhiteList[i]){returntrue;}}returnfalse;}functionmessageHandler(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 跨源XMLHttpRequstXMLHttpRequestLevel2通过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 framebustingframebusting技术可以用来保证某些内容不被加载到jframe中。应用程序首先检测其所在的窗口是否为最外层的窗口（window.top） 若不是则跳脱包含它的框架 代码如下所示：Javascript Code复制内容到剪贴板 if(window!=window.top) { window.top.location=location; }3.3二进制数据 支持新的二进制API（如Typed Array）的浏览器可以用XMLHttpRequest来发送二进制数据。Level 2规范支持调用send()方法发送Blob和ArrayBuffer对象 XML/HTML Code复制内容到剪贴板 vara=newUint8Array([8,6,7,5,3,0,9]);varxhr=newXMLHttpRequest();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。来源：爱蒂网
