^{<style id="xg3l9"></style>}

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

2024-09-05 07:21:21

字體：大中小

供稿：網(wǎng)友

1.跨文檔消息通信
跨文檔消息通信可以確保iframe、標(biāo)簽頁、窗口間安全地進(jìn)行跨源通信。它把postMessage API定義為發(fā)送消息的標(biāo)準(zhǔn)方式。利用postMessage發(fā)送消息非常簡單，代碼如下所示：
chatFrame.contextWindow.postMessage('Hello,world','http://www.example.com');
接收消息時(shí)僅需在頁面種增加一個(gè)事件處理函數(shù)。當(dāng)某個(gè)消息到達(dá)時(shí)，通過檢查消息的來源來決定是否對(duì)這條消息進(jìn)行處理。
消息事件是一個(gè)擁有data(數(shù)據(jù))和origin(源)屬性的DOM事件。data屬性是發(fā)送方傳遞的實(shí)際消息，而origin屬性是發(fā)送來源。
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ò)上用來建立信任關(guān)系的地址的子集。源由規(guī)則（scheme）、主機(jī)（host）、端口（post）組成。
源的概念中不考慮路徑。
HTML5定義了源的序列化。源在API和協(xié)議中以字符串的形式出現(xiàn)。
postMessage的安全規(guī)則確保了消息不會(huì)被傳遞到非預(yù)期的源頁面中。當(dāng)發(fā)送消息時(shí)，由發(fā)送方制定接收方的源。如果發(fā)送方用來調(diào)用postMessage的窗口不具有特定的源（例如用戶跳轉(zhuǎn)到了其他站點(diǎn)），瀏覽器就不會(huì)傳送消息。
類似地，接受消息的時(shí)候，發(fā)送方的源也被作為消息的一部分。為避免偽造，消息源由瀏覽器提供。接收方可以決定處理哪些消息，以及忽略哪些消息。我們可以保留一份白名單，告訴瀏覽器僅僅處理可信源的消息。
最好永遠(yuǎn)不要對(duì)來自第三方的字符串求值。再者，要避免使用eval方法處理應(yīng)用內(nèi)部字符串。可以通過window.JSON或者json,.org解析器使用JSON。
1.2 跨文檔消息通信的瀏覽器支持情況
常用的做法是檢測XMLHttpRequest對(duì)象中是否存在withCredentials屬性：

JavaScript Code復(fù)制內(nèi)容到剪貼板

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

下一篇：HTML5未來發(fā)展趨勢