亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長(zhǎng)資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    postmessage用法詳解

    postmessage用法詳解

    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)行跨域訪(fǎng)問(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)交互了。

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)