創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、吉陽網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計、成都商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為吉陽等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

對于使用H5實現(xiàn)跨域，很多人都一直處于半懂狀態(tài)。知道使用postMessage發(fā)送消息，使用onMessage接受消息，但是到底哪個方法應(yīng)該用window調(diào)用哪個應(yīng)該用iframe的contentWindow調(diào)用不是很清楚。下面是我做的一個本地實現(xiàn)跨域的小demo，可以在github下載這個示例。為了執(zhí)行它，首先，你需要找到你電腦的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

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

三個html文件的關(guān)系如下：三個域：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按鈕，可以發(fā)送消息到指定iframe (subAdomain.html 或者subBdomain.html)，在ifame中也可以發(fā)送消息到maindomain.html，同時，有一個收到ifame消息的回執(zhí)信息。

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

基本知識

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

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

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

網(wǎng)站欄目：HTML5中postMessage實現(xiàn)跨域的方法-創(chuàng)新互聯(lián)
路徑分享：http://m.2m8n56k.cn/article24/dodpje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、服務(wù)器托管、網(wǎng)站維護、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)