HTML5 window.postMessage與跨域

01-30

在前一篇文章中，講到瀏覽器同源策略，即阻止不同域的頁面間訪問彼此的方法和屬性，並對解決同源策略跨域問題提出的解決方案進行闡述：子域代理、JSONP、CORS。本篇將詳細闡述HTML5 window.postMessage，藉助postMessage API，文檔間可以以安全可控的方式實現跨域通信，第三方JavaScript代碼也可以與iframe內載入的外部文檔進行通信。

先來看一個postMessage實例

有需要可以看看相關代碼

HTML5 window.postMessage API

HTML5 window.postMessage是一個安全的、基於事件的消息API。

postMessage發送消息

在需要發送消息的源窗口調用postMessage方法即可發送消息。

源窗口
源窗口可以是全局的window對象，也可以是以下類型的窗口:
- 文檔窗口中的iframe:
var iframe = document.getElementById(my-iframe);n var win = iframe.documentWindow;n
- JavaScript打開的彈窗：
var win = window.open();n
- 當前文檔窗口的父窗口：
var win = window.parent;n
- 打開當前文檔的窗口：
var win = window.opener();n

找到源window對象後，即可調用postMessage API向目標窗口發送消息：

```win.postMessage(Hello, ttp://jhssdemo.duapp.com/);```n

postMessage函數接收兩個參數：第一個為將要發送的消息，第二個為源窗口的源。

註：只有當目標窗口的源與postMessage函數中傳入的源參數值匹配時，才能接收到消息。

接收postMessage消息

要想接收到之前源窗口通過postMessage發出的消息，只需要在目標窗口註冊message事件並綁定事件監聽函數，就可以在函數參數中獲取消息。

message事件監聽函數接收一個參數，Event對象實例，該對象有三個屬性：

data 發送的具體消息
origin 發送消息源
source 發送消息窗口的window對象引用

說明

可以將postMessage函數第二個參數設為*，在發送跨域消息時會跳過對發送消息的源的檢查。
postMessage只能發送字元串信息。

實例

源窗口

<!DOCTYPE html>n <html lang="en">n <head>n <meta charset="UTF-8">n <title>Html5 postMessage</title>n <style>n #otherWin {n width: 600px;n height: 400px;n background-color: #cccccc;n }n </style>n </head>n <body>n <button id="btn">open</button>n <button id="send">send</button>n  n <iframe src="http://jhssdemo.duapp.com/demo/h5_postmessage/win.html" n id="otherWin"></iframe> n <br/><br/> n <input type="text" id="message"><input type="button" n value="Send to child.com" id="sendMessage" /> n <script>n window.onload = function() {n var btn = document.getElementById(btn);n var btn_send = document.getElementById(send);n var sendBtn = document.getElementById(sendMessage);n var win;n btn.onclick = function() {n //通過window.open打開接收消息目標窗口n win = window.open(http://jhssdemo.duapp.com/demo/h5_postmessage/win.html, popUp);n }n btn_send.onclick = function() { n // 通過 postMessage 向子窗口發送數據 n win.postMessage(Hello, http://jhssdemo.duapp.com/);n }n function sendIt(e){ n // 通過 postMessage 向子窗口發送數據n document.getElementById("otherWin").contentWindow n .postMessage( n document.getElementById("message").value, n "http://jhssdemo.duapp.com/"); n } n sendBtn.onclick = function(e) {n sendIt(e);n };n };n </script>n </body>n </html>n

目標窗口

win.html

<!DOCTYPE html>n <html lang="en">n <head>n <meta charset="UTF-8">n <title>Html5 postMessage</title>n <style>n #txt {n width: 500px;n height: 300px;n background-color: #cccccc;n }n </style>n </head>n <body>n <h1>The New Window</h1>n <div id="txt"></div>n <script> n window.onload = function() {n var text = document.getElementById(txt); n //監聽函數，接收一個參數--Event事件對象n function receiveMsg(e) {n console.log("Got a message!");n console.log("nMessage: " + e.data);n console.log("nOrigin: " + e.origin);n text.innerHTML = "Got a message!<br>" +n "Message: " + e.data +n "<br>Origin: " + e.origin;n }n if (window.addEventListener) {n //為window註冊message事件並綁定監聽函數n window.addEventListener(message, receiveMsg, false);n }else {n window.attachEvent(message, receiveMsg);n }n };n </script>n </body>n </html>n

回顧

通過本篇的學習，了解了使用HTML5的postMessage API在窗口間進行通信，也知道可以藉助其實現跨域通信；現代瀏覽器基本都支持postMessage，而對於一些老式瀏覽器如IE7-等，可以使用一定的替代方案，進行數據通信，如window.name、url查詢字元和hash片段等。

歡迎訪問我的個人博客-HTML5 window.postMessage與跨域