詳解HTML5中的Communication API基本使用方法
侵權(quán)舉報(bào)/版權(quán)申訴1.跨文檔消息通信跨文檔消息通信可以確保ifame、標(biāo)簽頁(yè)、窗口間安全地進(jìn)行跨源通信。它把poMeageAPI定義為發(fā)送消息的標(biāo)準(zhǔn)方式。利用poMeage發(fā)送消息非常簡(jiǎn)單，代碼如下所示：chaFame.coexWidow.poMe......
以下是【金聰采編】分享的內(nèi)容全文：
以下是【金聰采編】分享的內(nèi)容全文：
跨文檔消息通信可以確保iframe、標(biāo)簽頁(yè)、窗口間安全地進(jìn)行跨源通信。它把postMessage API定義為發(fā)送消息的標(biāo)準(zhǔn)方式。利用postMessage發(fā)送消息非常簡(jiǎn)單，代碼如下所示：
chatFrame.contextWindow.postMessage('Hello,world','http://www.example.com');
接收消息時(shí)僅需在頁(yè)面種增加一個(gè)事件處理函數(shù)。當(dāng)某個(gè)消息到達(dá)時(shí)，通過(guò)檢查消息的來(lái)源來(lái)決定是否對(duì)這條消息進(jìn)行處理。
消息事件是一個(gè)擁有data(數(shù)據(jù))和origin(源)屬性的DOM事件。data屬性是發(fā)送方傳遞的實(shí)際消息，而origin屬性是發(fā)送來(lái)源。
postMessage API不僅可以勝任同源文檔間的通信，而且在瀏覽器不允許非同源通信的情況下，postMessage API也很有用。鑒于它的一致性和易用性，在同源文檔間通信時(shí)也推薦使用postMessage。在JavaScript環(huán)境的通信中始終應(yīng)使用postMessage API，例如使用HTML5 Web Worker通信時(shí)。
1.1 理解源安全
HTML5榮光引入源（origin）的概念對(duì)域安全進(jìn)行了闡明和改進(jìn)。源是在網(wǎng)絡(luò)上用來(lái)建立信任關(guān)系的地址的子集。源由規(guī)則（scheme）、主機(jī)（host）、端口（post）組成。
源的概念中不考慮路徑。
HTML5定義了源的序列化。源在API和協(xié)議中以字符串的形式出現(xiàn)。
postMessage的安全規(guī)則確保了消息不會(huì)被傳遞到非預(yù)期的源頁(yè)面中。當(dāng)發(fā)送消息時(shí)，由發(fā)送方制定接收方的源。如果發(fā)送方用來(lái)調(diào)用postMessage的窗口不具有特定的源（例如用戶跳轉(zhuǎn)到了其他站點(diǎn)），瀏覽器就不會(huì)傳送消息。
類似地，接受消息的時(shí)候，發(fā)送方的源也被作為消息的一部分。為避免偽造，消息源由瀏覽器提供。接收方可以決定處理哪些消息，以及忽略哪些消息。我們可以保留一份白名單，告訴瀏覽器僅僅處理可信源的消息。
最好永遠(yuǎn)不要對(duì)來(lái)自第三方的字符串求值。再者，要避免使用eval方法處理應(yīng)用內(nèi)部字符串?？梢酝ㄟ^(guò)window.JSON或者json,.org解析器使用JSON。
1.2 跨文檔消息通信的瀏覽器支持情況
常用的做法是檢測(cè)XMLHttpRequest對(duì)象中是否存在withCredentials屬性：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var xhr = new XMLHttpRequest(); if (typeof xhr.withCredentials === undefined) { //不支持跨源的XMLHttpRequest } else { //支持跨源的XMLHttpRequest }
提示 HTML5定義的MessageEvent接口也是HTML5 WebSockets和HTML5 WebWorkers的一部分。HTML5的通信功能用用于接受消息的API與MessageEvent接口是一致的。其他通信類API，如EventSource API和Web Workers，也都是使用MessageEvent接口來(lái)傳遞消息。
1.4 使用postMessage API創(chuàng)建應(yīng)用
發(fā)送消息
通過(guò)調(diào)用目標(biāo)頁(yè)面window對(duì)象中的postMessage()函數(shù)可發(fā)送消息，代碼如下：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- window.postMessage("Hello, world", "porta");
JavaScript Code復(fù)制內(nèi)容到剪貼板
- document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world", "cha");
接收消息時(shí)僅需在頁(yè)面中增加一個(gè)事件處理函數(shù)。當(dāng)某個(gè)消息到達(dá)時(shí)，通過(guò)檢查消息的來(lái)源來(lái)決定是否對(duì)這條消息進(jìn)行處理。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- window.postMessage("Hello, world", "porta");
源由規(guī)則（scheme）、主機(jī)（host）、端口（port）組成。
例如：由于規(guī)則不同（如https與http），所以頁(yè)面與頁(yè)面的源是不同的。
源的概念中不考慮路徑。如：與只是路徑不同，他們是相同的源。
源在API和協(xié)議中以字符串的形式出現(xiàn)。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- 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 { //忽略來(lái)自未知源的消息 } }
2 XMLHttpRequest Level2
作為XMLHttpRequest的改進(jìn)版，XMLHttpRequest Level2在功能上有了很大的改進(jìn)。主要集中在兩個(gè)方面：
（1）跨源XMLHttpRequests;
（2）進(jìn)度事件（Progress events）
2.1 跨源XMLHttpRequst
XMLHttpRequestLevel2通過(guò)CORS（Cross Origin Resource Sharing，跨源資源共享）實(shí)現(xiàn)了跨源XMLHttpRequests。
跨源HTTP請(qǐng)求包括一個(gè)Origin頭部，拓為服務(wù)器提供HTTP請(qǐng)求的源信息。頭部由瀏覽器保護(hù)，不能被應(yīng)用程序代碼修改。從本質(zhì)上講，它與跨文檔消息通信中消息事件的origin屬性作用相同。
CORS規(guī)范要求，對(duì)一些敏感行為——如申請(qǐng)證書的請(qǐng)求或除了GET和POST以外的OPTIONS預(yù)檢（preflight）請(qǐng)求，必須由瀏覽器發(fā)送給服務(wù)器，以確定這種行為能否被支持和允許，這意味著成功通信的背后或許需要由具備CORS出了能力的服務(wù)器來(lái)支持。
2.2 進(jìn)度事件
新版XMLHttpRequest中最重要的API改進(jìn)之一是增加了對(duì)進(jìn)度的響應(yīng)。
XMLHttpRequest Level2用了一個(gè)有意義的名字Progress進(jìn)度來(lái)命名進(jìn)度事件。
3 進(jìn)階功能
3.1 結(jié)構(gòu)化的數(shù)據(jù)
早期版本的postMessage僅支持字符串。后來(lái)的版本支持JavaScript對(duì)象、canvas imageData和文件等其他數(shù)據(jù)類型。由于不同瀏覽器對(duì)規(guī)范支持的差異，對(duì)不同的對(duì)象類型的支持情況也不同。
3.2 Framebusting
Framebusting技術(shù)可以用來(lái)保證某些內(nèi)容不被加載到j(luò)frame中。應(yīng)用程序首先檢測(cè)其所在的窗口是否為最外層的窗口（window.top），若不是則跳脫包含它的框架，代碼如下所示：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- if(window!=window.top)
- {
- window.top.location=location;
- }
支持新的二進(jìn)制API（如Typed Array）的瀏覽器可以用XMLHttpRequest來(lái)發(fā)送二進(jìn)制數(shù)據(jù)。Level 2規(guī)范支持調(diào)用send()方法發(fā)送Blob和ArrayBuffer對(duì)象
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- 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);
