站長資訊網
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，就可以實現交互了。
