HTML5提出了一個新的用來跨域傳值的方法，即postMessage(這個名字太通俗了所以你最好看看是不是自己寫過一個同名的把它覆蓋了)。幸運的是IE8就開始支持了。
我們假設有兩個網站，1.com與2.com，我在1.com的頁面上通過iframe或window.open或超鏈接打開了一個2.com的網頁，此時我要在2.com上做操作的時候，給1.com傳值，讓1.com有所變化。這個過程就是個跨域的過程。
如果你對window.open熟，你就會知道通過window.open打開的網頁（我們稱之為子網頁），可以通過window.opener對象，訪問到把它打開的頁面（父網頁），這樣一來，調用父頁面的函數就是非常簡單的事了。但是，在跨域的條件下，window.opener就成了一個空對象，“沒有權限”，瀏覽器會這么告訴你。
比如，你的父頁面有個函數叫callback，然后你子頁面本可以這樣調用：window.opener.callback()，同域時能成功，跨域時就沒有權限了。
但是，此時你調用window.opener.postMessage()，卻可以成功！
關於跨域傳值的痛苦我就不多說了，本文只說一些前兩天學習postMessage時了解到的重要知識點。
postMessage語法
| window.postMessage(msg,targetOrigin) |
這里我要專門說一下postMessage要通過window對象調用！因為這里的window不只是當前window，大部分使用postMessage的時候，都不是本頁面的window，而是其他網頁的window！如：
1,iframe的contentWindow
2,通過window.open方法打開的新窗口的window
3,window.opener
如果你使用postMessage時沒有帶window，那么，當然，你就是用的本頁面的window來調用了它。
參數說明
msg
這就是要傳遞的消息了。它可以是一切javascript參數，如字符串，數字，對象，數組，而不是和json一樣只局限於字符串，很強大吧？
targetOrigin
這個參數稱作“目標域”，注意啦，是目標域不是本域！比如，你想在2.com的網頁上往1.com網頁上傳消息，那么這個參數就是“http://1.com/”，而不是2.com.
另外，一個完整的域包括：
協議，主機名，端口號。如：http://g.cn:80/
獲取postMessage傳過來的消息
要對postMessage傳來的消息進行處理，就要在頁面上加一個onmessage事件。如：
| 1 2 3 4 |
window.addEventListener('message',function(e) { console.log(e.origin,e.data) ; alert('有數據傳來了！') ; }) |
要注意：最好是通過addEventListener或attachEvent來加入onmessage事件，而不要直接window.onmessage=function(){}，因為有的瀏覽器這樣加會識別不了（如低版Firefox）
這個onmessage事件接受一個參數，就是代碼里的e，實際上他就是一個event對象。但他里面有很明顯的3個參數與其他event對象不一樣，即：
1,data：顧名思義，是傳遞來的message
2,source：發送消息的窗口對象
3,origin：發送消息窗口的源（協議+主機+端口號）.比如從2.com往1.com發了消息，那么1.com收到消息時，e.origin就是2.com
最重要的就是data了，你可以用e.data取得他，然后做后續操作了。不過為了安全，你最好先判斷一下e.source和e.origin是不是正確來源，再作操作。
完整的postMessage流程示例
接着剛才的例子來，我着重講一個彈窗給父頁面傳消息的例子。
我們的父頁面叫1.com，他上面有關鍵代碼是：
| 1 2 3 4 |
window.addEventListener('message',function(e) { console.log(e.origin,e.data) ; alert('子頁面有數據傳來了！') ; }) |
就這么簡單。而彈出窗口(2.com)上的代碼是：
| 1 2 |
vardomain='http://1.com/' ; window.opener.postMessage({obj:'I am a obj'},domain ) |
還是很簡單吧！你看，跨域時本來不能訪問的window.opener可以訪問了——不過你直接調用父頁面的方法還是會失敗！就是這么不講理。
其他應用場景的例子
1,必須要說明：通過超鏈接打開的新窗口也能用window.opener來訪問其父頁面，代碼跟上面一樣
2，iframe的例子
父頁面：
| 1 2 |
varo=document.getElementsByTagName('iframe')[0] ; o.contentWindow.postMessage('Hello World',"*");//向框架頁傳消息 |
被框架包裹的子頁面：
| 1 2 3 4 5 6 7 8 9 |
window.addEventListener('onmessage',function(e) { if(e.domain=='1.com') { if(e.data=='Hello World') { e.source.postMessage('Hello',"*"); //反過來向父頁面傳消息 }else { alert(e.data) ; } } }); |
這個例子充分說明了postMessage是雙向的。
3，window.open一個窗口，然后向他傳消息
父頁面：
| 1 2 3 4 5 |
vardomain2='http://2.com/' ; varwin=window.open(domain2+'Portal/2.com.html','wwwwwwww' ) setTimeout(function() { win.postMessage('ddddddddd',domain2 ) },2000) |
子頁面：
| 1 2 3 |
window.addEventListener('message',function(e) { console.log(e.origin,e.data ) }) |
要注意父頁面中的setTimeout，也就是要延遲傳消息，因為子頁面不可能瞬間加載完成，他的onmessage事件也就沒初始化成功，這時給他傳消息，當然是收不到的了。
后記
1,IE8+雖然支持postMessage，但只支持iframe的方式，window.open打開的新窗口之間，沒法用。直到IE10才有相關改進
2,如何在本地模擬跨域呢？在hosts文件里加入：
127.0.0.1 1.com127.0.0.1 2.com
就可以模擬出2個不同的域名了。