詳見： http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp77html
HTML5的window.postMessage簡述html5
postMessage是html爲了解決跨域通訊，特別引入的一個新的API，目前支持這個API的瀏覽器有：Firefox, IE8+, Opera, Safari, Chrome。postMessage容許頁面中的多個iframe/window的通訊，postMessage也能夠實現ajax直接跨域，不經過服務器端代理。ajax
.postMessage用法解析跨域
這裏以iframe1.html的代碼爲例。瀏覽器
1)向另一個iframe發送消息安全
var message = 'hello，RIA之家！ ' + (new Date().getTime());服務器
window.parent.frames[1].postMessage(message, '*');app
iframe1.html須要向iframe2.html發送消息，也就是第二個iframe，因此是window.parent.frames[1]，若是是向父頁面發送消息就是window.parent。函數
postMessage這個函數接收二個參數，缺一不可，第一個參數即你要發送的數據，第二個參數是很是重要，主要是出於安全的考慮，通常填寫容許通訊的域名，這裏明河爲了簡化，因此使用’*'，即不對訪問的域進行判斷。post
2)另一個iframe監聽消息事件
iframe2.html中寫個監聽message事件，當有消息傳到iframe2.html時就會觸發這個事件。
var onmessage = function(e) {
var data = e.data,p = document.createElement_x('p');
p.innerHTML = data;
document.getElementById('display').appendChild(p);
};
//監聽postMessage消息事件
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}
整個通訊過程就結束了！是否是很是簡單愜意！
若是你有加域名限,好比下面的代碼：
window.parent.frames[1].postMessage(message, 'http://www.36ria.com');
就要在onmessage中追加個判斷：
if(event.origin !== http://www.36ria.com') return;
6.明河結語
html5的postMessage至關強悍和易用！你能夠利用這個特性解決大部分場景下的跨域問題，不用再建立個代理iframe之類的繁瑣方法。嚴重推薦你們練習下該方法，目前的確存在瀏覽器差別問題，但相信之後會成爲主流跨域通訊方案。