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

2024-09-05 07:21:21

字體：大中小

來源：轉載

供稿：網友

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

上一篇：HTML5中的音頻和視頻媒體播放元素小結

下一篇：HTML5未來發展趨勢