詳解HTML5中的Communication API基本使用方法_html5教學技巧

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 > (typeof xhr.withCredentials === undefined) {    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"
1. ,  > 　　第一個參數包括要傳送的數據，第二個參數是訊息傳送的目的地。要傳送訊息給iframe，可以再對應iframe的contentWindow中呼叫postMessage，程式碼如下：　　 JavaScript Code

複製內容到剪貼簿

document.getElementsByTagName("iframe"

)[0].contentWindow.postMessage(

1. )[0].contentWindow.postMessage("Hello, >, "cha");   監聽訊息事件
   　　接收訊息時僅需在頁面中增加一個事件處理函數。當某個訊息到達時，透過檢查訊息的來源來決定是否對此訊息進行處理。
   　　
   JavaScript Code複製內容到剪貼簿

   1. window.postMessage("Hello, world",  >
   　　訊息事件是一個擁有data（資料）和origin（來源）屬性的DOM事件。 data屬性是發送方傳遞的實際訊息，而origin屬性是發送來源。

   　　來源由規則（scheme）、主機（host）、連接埠（port）組成。

   　　例如：由於規則不同（如https與http），所以頁面與頁面的來源是不同的。
   　　源的概念中不考慮路徑。如：與只是路徑不同，他們是相同的源頭。
   　　來源在API和協定中以字串的形式出現。
   　　
   
   
   JavaScript Code
   複製內容到剪貼簿

   var
   1.  originWhiteList = ["porta",  , ""]; function checkWhiteList(origin) {  checkWhiteList(origin) { var i=0; iif if if return true; } } return; } function messageHandler(e) { if if (>if (chn)2.數據); } else { //忽略未知來源的訊息 } } 

   　　postMessage API可以適用於同源和非同源通信，鑑於它的一致性，在同源文檔間通信時也推薦適用postMessage。
   2 XMLHttpRequest Level2
   作為XMLHttpRequest的改進版，XMLHttpRequest Level2在功能上有了很大的改進。主要集中在兩個方面：
   （1）跨源XMLHttpRequests;（2）進度事件（Progress events）
   
   2.1 跨源XMLHttpRequst
   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([83,78Array([83,755,55, 0,9]); var xhr = new XMLHttpRequest(); x ", true); console.log(a); xhr.send(a.buffer);  

   　　XMLHttpRequest Level 2也會公開二進位回應資料。將responseType屬性值設定為text、document、arraybuffer或blob來控制 有response屬性傳回的物件類型。如果想要查看HTTP回應體包含的原始位元組，需要將responseTyper屬性值設為arraybuffer或blob。