解決postMessage跨域問題

　　在HTML5中新增了postMessage方法，postMessage可以實現跨文檔消息傳輸（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。

　　該方法可以通過綁定window的message事件來監聽發送跨文檔消息傳輸內容。

 

　　1. postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數不多可以跨域操作的window屬性之一，它可用於解決以下方面的問題：

　　a.） 頁面和其打開的新窗口的數據傳遞
　　b.） 多窗口之間消息傳遞
　　c.） 頁面與嵌套的iframe消息傳遞
　　d.） 上面三個場景的跨域數據傳遞

　　2. postMessage用法：

postMessage(data,origin)方法接受兩個參數

　　參數說明：

　　data： html5規范支持任意基本類型或可復制的對象，但部分瀏覽器只支持字符串，所以傳參時最好用JSON.stringify()序列化。
　　origin： 協議+主機+端口號，也可以設置為"*"，表示可以傳遞給任意窗口，如果要指定和當前窗口同源的話設置為"/"。

　　

　　舉例說明： 

　　　　兩個頁面之間進行數據傳輸，postMessage示例：

　　　　我啟動了兩個ip地址來代表不同域名，頁面t_hotnotes_list.html插入如下代碼

<iframe id="iframe" src="http://10.73.154.73:8088/rbc/t/search_role.html" style="display:none;"></iframe>
    <script>       
        var iframe = document.getElementById('iframe');
        iframe.onload = function() {
            var data = {
                name: 'aym',
                type:'wuhan'
            };
            // 向domain2傳送跨域數據
            iframe.contentWindow.postMessage(JSON.stringify(data), 'http://10.73.154.73:8088');
        };

        // 接受domain2返回數據，這邊給延遲的原因，因為同步傳輸時，頁面不一定立馬拿到數據，所以給延遲
        setTimeout(function(){
            window.addEventListener('message', function(e) {
                alert('data from domain2 sss ---> ' + e.data);
            }, false);
        },10)
    </script>

　　　　　　頁面search_role.html插入如下代碼：

<script>
        // 接收domain1的數據
        window.addEventListener('message', function(e) {
            console.log(e.data);

            var data = JSON.parse(e.data);
            if (data) {
                data.number = 16;
                data.age = 89;
                data.icon = 'sfafdafdafasdf';

                // 處理后再發回domain1
                window.parent.postMessage(JSON.stringify(data), 'http://10.73.154.72:8088');
            }
        }, false);
    </script>

　　當兩個服務啟動之后，我們在瀏覽器中打開頁面t_hotnotes_list.html

http://10.73.154.72:8088/rbc/t/t_hotnotes_list.html

　　得到如下圖結果，t_hotnotes_list.html得到兩個頁面的數據