解決postMessage跨域問題

時間 2019-12-13 標籤解決 postmessage 跨域問題

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

　　該方法能夠經過綁定window的message事件來監聽發送跨文檔消息傳輸內容。html5

　　1. postMessage是HTML5 XMLHttpRequest Level 2中的API，且是爲數很少能夠跨域操做的window屬性之一，它可用於解決如下方面的問題：跨域

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

　　2. postMessage用法：dom

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

　　參數說明：post

　　data： html5規範支持任意基本類型或可複製的對象，但部分瀏覽器只支持字符串，因此傳參時最好用JSON.stringify()序列化。
　　origin：協議+主機+端口號，也能夠設置爲"*"，表示能夠傳遞給任意窗口，若是要指定和當前窗口同源的話設置爲"/"。spa

　　舉例說明： code

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

　　　　我啓動了兩個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獲得兩個頁面的數據