亚洲AV桔色成人,国产精品无码AV在线播放,国产无码不卡精品专区

主頁 > 知識庫 > 詳解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復制內容到剪貼板

　　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復制內容到剪貼板

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復制內容到剪貼板

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復制內容到剪貼板

if(window!=window.top)
{
window.top.location=location;
}

3.3二進制數據
　　支持新的二進制API（如Typed Array）的瀏覽器可以用XMLHttpRequest來發送二進制數據。Level 2規范支持調用send()方法發送Blob和ArrayBuffer對象
　　

XML/HTML Code復制內容到剪貼板

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。

標簽：德州黃山內蒙古撫順蚌埠辛集鶴崗楊凌

巨人網絡通訊聲明：本文標題《詳解HTML5中的Communication API基本使用方法》，本文關鍵詞詳解,HTML5,中的,Communication,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。

亚洲综合原千岁中文字幕_国产精品99久久久久久久vr_无码人妻aⅴ一区二区三区浪潮_成人h动漫精品一区二区三

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