HTML5中使用postMessage實(shí)現(xiàn)兩個(gè)網(wǎng)頁間傳遞數(shù)據(jù)

2020-03-24 17:26:25

字體：大中小

供稿：網(wǎng)友

估計(jì)很少人知道HTML5 APIS里有一個(gè)window.postMessage API。window.postMessage的功能是允許程序員跨域在兩個(gè)窗口/frames間發(fā)送數(shù)據(jù)信息。基本上，它就像是跨域的AJAX，但不是瀏覽器跟服務(wù)器之間交互，而是在兩個(gè)客戶端之間通信。讓我們來看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有瀏覽器都支持這個(gè)功能。數(shù)據(jù)發(fā)送端首先我們要做的是創(chuàng)建通信發(fā)起端，也就是數(shù)據(jù)源 source 。作為發(fā)起端，我們可以open一個(gè)新窗口，或創(chuàng)建一個(gè)iframe，往新窗口里發(fā)送數(shù)據(jù)，簡(jiǎn)單起見，我們每6秒鐘發(fā)送一次，然后創(chuàng)建消息監(jiān)聽器，從目標(biāo)窗口監(jiān)聽它反饋的信息。JavaScript Code復(fù)制內(nèi)容到剪貼板
//彈出一個(gè)新窗口 vardomain='http://scriptandstyle.com'; varmyPopup=window.open(domain +'/windowPostMessageListener.html','myWindow'); //周期性的發(fā)送消息 setInterval(function(){ varmessage='Hello!Thetimeis:'+(newDate().getTime()); console.log('blog.local:sendingmessage:'+message); //sendthemessageandtargetURI myPopup.postMessage(message,domain); },6000); //監(jiān)聽消息反饋 window.addEventListener('message',function(event){ if(event.origin!=='http://scriptandstyle.com')return; console.log('receivedresponse:',event.data); },false);
這里我使用了window.addEventListener，但在IE里這樣是不行的，因?yàn)镮E使用window.attachEvent。如果你不想判斷瀏覽器的類型，可以使用一些工具庫，比如jQuery或Dojo。假設(shè)你的窗口正常的彈出來了，我們發(fā)送一條消息需要指定URI(必要的話需要指定協(xié)議、主機(jī)、端口號(hào)等)，消息接收方必須在這個(gè)指定的URI上。如果目標(biāo)窗口被替換了，消息將不會(huì)發(fā)出。我們同時(shí)創(chuàng)建了一個(gè)事件監(jiān)聽器來接收反饋信息。有一點(diǎn)極其重要，你一定要驗(yàn)證消息的來源的URI！只有在目標(biāo)方合法的情況才你才能處理它發(fā)來的消息。如果是使用iframe，代碼應(yīng)該這樣寫：JavaScript Code復(fù)制內(nèi)容到剪貼板
vardomain='http://scriptandstyle.com'; variframe=document.getElementById('myIFrame').contentWindow; //發(fā)送消息 setInterval(function(){ varmessage='Hello!Thetimeis:'+(newDate().getTime()); console.log('blog.local:sendingmessage:'+message); //sendthemessageandtargetURI iframe.postMessage(message,domain); },6000);
數(shù)據(jù)接收端下面我們要開發(fā)的是數(shù)據(jù)接收端的頁面。接收方窗口里有一個(gè)事件監(jiān)聽器，監(jiān)聽 message 事件，一樣，你也需要驗(yàn)證消息來源方的地址。消息可以來自任何地址，要確保處理的消息是來自一個(gè)可信的地址。JavaScript Code復(fù)制內(nèi)容到剪貼板
window.addEventListener('message',function(event){ if(event.origin!=='http://davidwalsh.name')return; console.log('messagereceived:'+event.data,event); event.source.postMessage('hollabackyoungin!',event.origin); },false);
上面的代碼片段是往消息源反饋信息，確認(rèn)消息已經(jīng)收到。下面是幾個(gè)比較重要的事件屬性：source 消息源，消息的發(fā)送窗口/iframe。
origin 消息源的URI(可能包含協(xié)議、域名和端口)，用來驗(yàn)證數(shù)據(jù)源。
data 發(fā)送方發(fā)送給接收方的數(shù)據(jù)。這三個(gè)屬性是消息傳輸中必須用到的數(shù)據(jù)。使用window.postMessage跟其他很web技術(shù)一樣，如果你不校驗(yàn)數(shù)據(jù)源的合法性，那使用這種技術(shù)將會(huì)變得很危險(xiǎn)；你的應(yīng)用的安全需要你對(duì)它負(fù)責(zé)。window.postMessage就像是PHP相對(duì)于JavaScript技術(shù)。window.postMessage很酷，不是嗎？以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持phpstudy。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML中的autocomplete屬性是什么

下一篇：html5 Canvas畫圖教程(9)—canvas中畫出矩形和圓形