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

平橋網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)成立與2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

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

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

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

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

基本知識(shí)

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

代碼

main.com

    
This is the main domain
    

        

        
        
    
    

        
iframe A
        
    
    

        
iframe B
        
    
    

        

    
    

• a.com

       
This is domain A
    
    
    

        

    
    

b.com

    
This is domain B
    
    
    

        

    
    

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