HTML5的window.postMessage簡述

postMessage是html為了解決跨域通訊，特別引入的一個新的API，目前支援這個API的瀏覽器有：Firefox, IE8+, Opera, Safari, Chrome。postMessage允許頁面中的多個iframe/window的通訊，postMessage也可以實現ajax直接跨域，不通過伺服器端代理。

.postMessage用法解析

這裡以iframe1.html的程式碼為例。

1)向另外一個iframe傳送訊息

var message = 'hello，RIA之家！   ' + (new Date().getTime());

        window.parent.frames[1].postMessage(message, '*');

iframe1.html需要向iframe2.html傳送訊息，也就是第二個iframe，所以是window.parent.frames[1]，如果是向父頁面傳送訊息就是window.parent。

postMessage這個函式接收二個引數，缺一不可，第一個引數即你要傳送的資料，第二個引數是非常重要，主要是出於安全的考慮，一般填寫允許通訊的域名，這裡明河為了簡化，所以使用’*'，即不對訪問的域進行判斷。

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之類的繁瑣方法。嚴重推薦大家練習下該方法，目前的確存在瀏覽器差異問題，但相信以後會成為主流跨域通訊方案。