創新互聯專注于企業成都營銷網站建設、網站重做改版、吉陽網站定制設計、自適應品牌網站建設、H5網站設計、成都商城網站開發、集團公司官網建設、成都外貿網站建設公司、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為吉陽等各大城市提供網站開發制作服務。

對于使用H5實現跨域，很多人都一直處于半懂狀態。知道使用postMessage發送消息，使用onMessage接受消息，但是到底哪個方法應該用window調用哪個應該用iframe的contentWindow調用不是很清楚。下面是我做的一個本地實現跨域的小demo，可以在github下載這個示例。為了執行它，首先，你需要找到你電腦的hosts文件，在127.0.0.1 localhost下添加如下代碼：

127.0.0.1   localhost
127.0.0.1   main.com
127.0.0.1   A.com
127.0.0.1   B.com

然后，你需要啟動一個服務器，如Apache等，把github上下載的三個html文件放到你的服務器上。最后，你只需訪問http://main.com:你的端口號 ，就可以進行跨域通信了。

三個html文件的關系如下：三個域：http://main.com:8090 ； http://a.com:8090 ； http://b.com:8090 。 主頁面maindomain.html在main.com，兩個iframe (subAdomain.html , subBdomain.html)分別在 a.com , b.com 。在maindomain.html中，向textarea中輸入消息，點擊send to iframe按鈕，可以發送消息到指定iframe (subAdomain.html 或者subBdomain.html)，在ifame中也可以發送消息到maindomain.html，同時，有一個收到ifame消息的回執信息。

這應該是很常見的場景，把網站公共的資源放到某子域，在其他子域需要訪問該子域上的資源。

基本知識

首先介紹onMessage事件中，event的一些屬性，理解這些可以使你很容易讀懂我的示例。
* data: 傳入的數據
* origin: 發送消息的文檔所在的域
* source: 發送消息的文檔的window對象的代理
如果你想在子域X向子域Y發送消息，你需要，在子域X的html文件，獲取Y的window對象（iframe的contentWindow），然后調用postMessage(message, Y所在的域)，同時，在子域Y的html文件中，監聽window對象message事件（使用onMessage）就好。當然，你可以在onMessage中再次使用postMessage，向子域X發送一個回執信息。 我們時常混亂的是，在哪個域的window對象上調用postMessage。

代碼

main.com

    <h2>This is the main domain</h2>
    <div style="margin:0 20px;">
        <textarea name="main" cols="80" rows="5"></textarea><br/>
        <input type="button" value="send to iframe A"/>
        <input type="button" value="send to iframe B"/>
    </div>
    <div style="float:left; margin:0 20px;">
        <h4>iframe A</h4>
        <iframe src="http://a.com:8090/subAdomain.html" frameborder="1" style="width:300px; height:300px;"></iframe>
    </div>
    <div style="float:left;">
        <h4>iframe B</h4>
        <iframe src="http://b.com:8090/subBdomain.html" frameborder="1" style="width:300px; height:300px;"></iframe>
    </div>
    <div style="float:left;">
        <h6 id="received"></h6>
    </div>
    <script>
        var received = document.querySelector('#received');
        var sendToIframeA = document.querySelectorAll('input')[0];
        var sendToIframeB = document.querySelectorAll('input')[1];
        var iframeA = document.querySelectorAll('iframe')[0];
        var iframeB = document.querySelectorAll('iframe')[1];
 
        //receive message
        function getMessage(e){
            console.log('main received!');
            received.innerHTML = 'Receive message from ' + e.origin + ', the data is ' + e.data;
            e.source.postMessage('Received the message', e.origin);
        }
        window.addEventListener('message', getMessage, false);
 
        //post message
        sendToIframeA.addEventListener('click', function(){
            var content = document.querySelector('textarea').value;
            iframeA.contentWindow.postMessage(content, 'http://a.com:8090');
        }, false);
        sendToIframeB.addEventListener('click', function(){
            var content = document.querySelector('textarea').value;
            iframeB.contentWindow.postMessage(content, 'http://b.com:8090');
        }, false);
    </script>

• a.com

       <h6>This is domain A</h6>
    <textarea name="subA" cols="30" rows="10"></textarea>
    <input type="button" value="send to parent"/>
    <div style="float:left;">
        <h6 id="received"></h6>
    </div>
    <script>
        var send = document.querySelector('input');
        var text = document.querySelector('textarea');
        var received = document.querySelector('#received');
 
        //receive message
        function getMessage(e){
            console.log('A received!');
            received.innerHTML = 'Receive message from ' + e.origin + ', the data is ' + e.data;
            //e.source.postMessage('Received the message', e.origin);
        }
        window.addEventListener('message', getMessage, false);
 
        //post message
        send.addEventListener('click', function(){
            var content = text.value;
            window.parent.postMessage(content, 'http://main.com:8090');
        }, false);
    </script>

b.com

    <h6>This is domain B</h6>
    <textarea name="subB" cols="30" rows="10"></textarea>
    <input type="button" value="send to parent"/>
    <div style="float:left;">
        <h6 id="received"></h6>
    </div>
    <script>
        var send = document.querySelector('input');
        var text = document.querySelector('textarea');
        var received = document.querySelector('#received');
 
        //receive message
        function getMessage(e){
            console.log('B received!');
            received.innerHTML = 'Receive message from ' + e.origin + ', the data is ' + e.data;
            //e.source.postMessage('Received the message', e.origin);
        }
        window.addEventListener('message', getMessage, false);
 
        //post message
        send.addEventListener('click', function(){
            var content = text.value;
            window.parent.postMessage(content, 'http://main.com:8090');
        }, false);
    </script>

關于HTML5中postMessage實現跨域的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前標題：HTML5中postMessage實現跨域的方法-創新互聯
瀏覽路徑：http://www.yijiale78.com/article24/dodpje.html

成都網站建設公司_創新互聯，為您提供網站營銷、App開發、全網營銷推廣、小程序開發、ChatGPT、微信小程序

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯