postmessage用法
關(guān)于html5的PostMessage的用法總結(jié)
大家都知道，網(wǎng)頁(yè)之間傳遞數(shù)據(jù)可以使用ajax請(qǐng)求來(lái)完成，今天我總結(jié)下我學(xué)習(xí)的postMessage是如何完成跨頁(yè)面請(qǐng)求數(shù)據(jù)的呢？首先，postMessage是html5新增的一個(gè)解決跨域的一個(gè)方法。那他是如何使用的呢？這里我把一個(gè)案例分享出來(lái)把。
相關(guān)視頻教程推薦：html視頻教程
看下面的代碼：
test.html
<!DOCTYPE html><html><head><title></title><meta charset="utf-8"/></head><body></body><script>onmessage=function(e){ e=e||event; document.write("my name is ",e.data); document.body.style.background = 'red';};</script></html>1.html
<!DOCTYPE html><html><head><title>window.postMessage</title><meta charset="utf-8"/><h1>test接收區(qū)</h1></head><body> </body><iframe id="f" src="http://localhost:8080/chajian/test.html"></iframe><script>var f=document.getElementById("f");//給框架網(wǎng)頁(yè)發(fā)送消息，然后收到之后，會(huì)傳送過(guò)來(lái)。f.οnlοad=function(){ setTimeout(function(){ f.contentWindow.postMessage("謝霆鋒","http://localhost:8080"); },3000)}</script></html>首先，它的原理是這樣的。我就拿我的案例代碼來(lái)說(shuō)吧。
1.html里面鑲嵌了一個(gè)iframe網(wǎng)頁(yè) 框架，他就是靠這里傳輸數(shù)據(jù)的，等1.html加載完成之后，他會(huì)主動(dòng)發(fā)給test.html 謝霆鋒，然后test.html收到之后，它里面有接收消息的處理函數(shù)，他收到消息之后，立馬 ，給網(wǎng)頁(yè)返回 一段字符串，然后把自己的背景改成紅色。這樣就達(dá)到了網(wǎng)頁(yè)互動(dòng)的效果，可惜的是，萬(wàn)惡的ie6.7不支持，兼容度不高。
注意：postMessage的寫(xiě)法，postMessage之前寫(xiě)的是你要通信的window對(duì)象（也就是你要向誰(shuí)通信），此時(shí)的window.parent的權(quán)限僅限于此，不能在像同域似的，進(jìn)行獲取父級(jí)的DOM元素，否則瀏覽器會(huì)報(bào)錯(cuò)，提示你不能進(jìn)行跨域訪問(wèn)，我們?cè)賮?lái)看postMessage中所接收的參數(shù)，第一個(gè)參數(shù)就是你要像另外一個(gè)窗口傳遞的數(shù)據(jù)（只能傳字符串類(lèi)型），第二個(gè)參數(shù)表示目標(biāo)窗口的源，協(xié)議+主機(jī)+端口號(hào)，是為了安全考慮，如果設(shè)置為“*”，則表示可以傳遞給任意窗口。
上面是單頁(yè)面交互的，下面給個(gè)雙頁(yè)面交互的。其實(shí)都是一樣的，不過(guò)就是 兩個(gè)頁(yè)面都寫(xiě)了監(jiān)聽(tīng) 發(fā)送事件。
test.html
<!DOCTYPE html><html><head><title></title><meta charset="utf-8"/></head><body><h1 class="header">page B</h1> <input type="text" id="inp" value="我想你"><button οnclick="send()">send</button></body> <script>window.addEventListener('message', function(ev) { // if (ev.source !== window.parent) {return;} var data = ev.data; document.write("my name is ",data); document.body.style.background = 'red';}, false); function send() { var data = document.querySelector('#inp').value; parent.postMessage(data, 'http://localhost:8080/'); // 若父頁(yè)面的域名和指定的不一致，則postMessage失敗 // parent.postMessage(data, '*'); // 觸發(fā)父頁(yè)面的message事件}</script></html>
1.html
<!DOCTYPE html><html><head><title>window.postMessage</title><meta charset="utf-8"/><h1>test接收區(qū)</h1></head><body> <h1 class="header">page A</h1><div class="mb20"> <textarea name="ta" id="data" cols="30" rows="5">hello world</textarea> <button style="font-size:20px;" οnclick="send()">post message</button></div><!-- 跨域的情況 --><iframe src="http://localhost:8080/chajian/test.html" id="child" style="display: block; border: 1px dashed #ccc; height: 300px;"></iframe> <script>function send() { var data = document.querySelector('#data').value; window.frames[0].postMessage(data, 'http://localhost:8080/'); // 觸發(fā)跨域子頁(yè)面的messag事件} window.addEventListener('message', function(messageEvent) { var data = messageEvent.data; console.info('message from child:', data); document.write("收到了數(shù)據(jù)： ",data); document.body.style.background = 'red';}, false);</script></body></html>同樣的，1.html是主頁(yè)面。打開(kāi)html，就可以實(shí)現(xiàn)交互了。
更多編程相關(guān)學(xué)習(xí)，請(qǐng)關(guān)注武林網(wǎng)編程入門(mén)視頻教程頻道！
以上就是postmessage用法詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注武林網(wǎng)其它相關(guān)文章！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
新聞熱點(diǎn)
疑難解答
