HTML5之postMessage和addEventListener實現跨域通訊
使用postMessage實現跨域的前提條件是一個頁面通過<iframe>呼叫另一個頁面,示例如下所示:
在這個示例中,通過outter.html呼叫inner.html
這是outter.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>outter</title> </head> <body> 獲取的資訊為: <div id="getMessage"></div> <iframe src="http://test.inner.com:8080/test/inner.html" frameborder="1"></iframe> <hr> 要傳入內部的資訊:<input type="text" id="out"><input type="button" value="點選" id="but"> <script> var message=document.getElementById("getMessage"); var text=document.getElementById("out"); window.addEventListener("message",function(e){ if(e.data!=null){ message.innerText=e.data; } }); document.getElementById("but").onclick=function(){ window.frames[0].postMessage(text.value,"http://test.inner.com:8080"); text.value=""; } </script> </body> </html>
這裡顯示inner.html
上面的示例如果你想試用的話,<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>inner</title> </head> <body> 外面傳進來的資訊為: <div id="getMessage"></div> <hr> 要傳到外面的資訊為:<input type="text" id="text"><input type="button" value="傳遞" id="but"> <script> var message=document.getElementById("getMessage"); var text=document.getElementById("text"); document.getElementById("but").onclick=function(){ window.parent.postMessage(text.value,"http://test.outter.com:8080"); text.value=""; } window.addEventListener("message",function(e){ if(e.data!=null){ message.innerText=e.data; } }); </script> </body> </html>
一、需要在tomcat的webapps下,新建一個test資料夾,在test資料夾下放入inner.html和outter.html。
二、在電腦的hosts檔案中配置兩個域名127.0.0.1 test.inner.com和127.0.0.1 test.outter.com
三、瀏覽器訪問的URL為 http://test.outter.com:8080/test/outter.html
相關的知識點如下:一、<iframe>後必須為</iframe>,而不能使用<iframe/>
二、獲取子視窗物件:document.getElementById("").contentWindow==$("")[0].contentWindow==window.frames[0]
獲取父視窗物件:window.parent
三、postMessage的兩個引數,第一個引數為想跨域傳遞的值,第二個引數是作用域,包括協議、域名和埠。這裡或者為對應的域名,或者為*,意為對所有域都有效。
四、postMessage的前面定義了由本視窗window向哪個視窗傳值。這裡是在父window向第一個子window傳值。
五、方法addEventListener(type,function,useCapture)前面可為元素、document、window或XMLHttpRequest
type字串,事件名稱,不含"on",比如click,mouseover,keydown等。
message //事件,每接收到一次更新,就會發生onmessage事件。
當為postMessage時,可以用onmessage接受,但是當為sendMessage時,無法用onMessage接收。
useCapture為是否使用事件捕獲,一般為false //事件捕獲,從上往下,和事件冒泡相反
六、sendMessage和postMessage的區別
postMessage:只負責將訊息放入訊息佇列,不確定何時及是否處理,非同步,返回postMessage是否正確執行。
sendMessage:把訊息放入訊息佇列,要等到訊息處理完,返回訊息處理的返回碼(DWord型別)後才繼續,同步,返回處理結果。