站長資訊網
        最全最豐富的資訊網站

        postmessage用法詳解

        postmessage用法詳解

        postmessage用法

        關于html5的PostMessage的用法總結

        大家都知道,網頁之間傳遞數據可以使用ajax請求來完成,今天我總結下我學習的postMessage是如何完成跨頁面請求數據的呢?首先,postMessage是html5新增的一個解決跨域的一個方法。那他是如何使用的呢?這里我把一個案例分享出來把。

        相關視頻教程推薦: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接收區</h1> </head> <body>   </body> <iframe id="f" src="http://localhost:8080/chajian/test.html"></iframe> <script> var f=document.getElementById("f"); //給框架網頁發送消息,然后收到之后,會傳送過來。 f.οnlοad=function(){  setTimeout(function(){   f.contentWindow.postMessage("謝霆鋒","http://localhost:8080");  },3000) } </script> </html>

        首先,它的原理是這樣的。我就拿我的案例代碼來說吧。

        1.html里面鑲嵌了一個iframe網頁 框架,他就是靠這里傳輸數據的,等1.html加載完成之后,他會主動發給test.html 謝霆鋒,然后test.html收到之后,它里面有接收消息的處理函數,他收到消息之后,立馬 ,給網頁返回 一段字符串,然后把自己的背景改成紅色。這樣就達到了網頁互動的效果,可惜的是,萬惡的ie6.7不支持,兼容度不高。

        注意:postMessage的寫法,postMessage之前寫的是你要通信的window對象(也就是你要向誰通信),此時的window.parent的權限僅限于此,不能在像同域似的,進行獲取父級的DOM元素,否則瀏覽器會報錯,提示你不能進行跨域訪問,我們再來看postMessage中所接收的參數,第一個參數就是你要像另外一個窗口傳遞的數據(只能傳字符串類型),第二個參數表示目標窗口的源,協議+主機+端口號,是為了安全考慮,如果設置為“*”,則表示可以傳遞給任意窗口。

        上面是單頁面交互的,下面給個雙頁面交互的。其實都是一樣的,不過就是 兩個頁面都寫了監聽 發送事件。

        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/'); // 若父頁面的域名和指定的不一致,則postMessage失敗     // parent.postMessage(data, '*'); // 觸發父頁面的message事件 } </script> </html>

        1.html

        <!DOCTYPE html> <html> <head> <title>window.postMessage</title> <meta charset="utf-8"/> <h1>test接收區</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/'); // 觸發跨域子頁面的messag事件 }   window.addEventListener('message', function(messageEvent) {     var data = messageEvent.data;      console.info('message from child:', data);     document.write("收到了數據: ",data);     document.body.style.background = 'red'; }, false); </script> </body> </html>

        同樣的,1.html是主頁面。打開html,就可以實現交互了。

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: HEYZO无码综合国产精品227| 国产成人精品免费午夜app| 久久久久人妻一区精品色| 国产成人久久久精品二区三区| 精品无码国产一区二区三区51安 | 无码精品黑人一区二区三区| 精品久久人人妻人人做精品| 亚洲精品国产成人99久久| 国产精品拍天天在线| 呦交小u女国产精品视频| 国产精品无码v在线观看| 亚洲一二成人精品区| 国产精品自产拍在线观看| 国产精品毛片一区二区三区 | 国产成人精品综合久久久| 国产一区二区精品久久| 国产精品白丝AV网站| 国产人妖乱国产精品人妖| 亚洲AV成人精品一区二区三区| 天天爽夜夜爽夜夜爽精品视频 | 精品久久人人妻人人做精品 | 久久精品亚洲乱码伦伦中文| 精品国产一区二区三区在线观看| 国产91在线精品| 99久久亚洲综合精品成人| 四虎影视国产精品亚洲精品hd| 国产精品自产拍在线观看| 久久r热这里有精品视频| 久久久国产精品福利免费 | 国产精品熟女高潮视频| 精品人妻码一区二区三区| 国产99视频精品免费专区| 精品亚洲综合久久中文字幕| 日韩精品免费视频| 亚洲一区精品中文字幕| 国产精品内射婷婷一级二| 国产中文在线亚洲精品官网| 久热精品人妻视频| 亚洲综合av永久无码精品一区二区| 无码人妻精品一区二区三区66| 精品人妻大屁股白浆无码|