搜尋

首頁 >web前端 >H5教程 >HTML5中postMessage實作跨網域的程式碼分析

HTML5中postMessage實作跨網域的程式碼分析

不言
不言原創
2018-08-08 10:51:152333瀏覽

這篇文章帶給大家的內容是關於HTML5中postMessage實現跨域的程式碼分析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

對於使用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訊息的回執訊息。

這應該是很常見的場景，把網站公共的資源放到某個子網域，在其他子網域需要存取該子網域上的資源。實現的效果如下。

1、不帶回執訊息： 
HTML5中postMessage實作跨網域的程式碼分析

2、帶回執訊息： 
HTML5中postMessage實作跨網域的程式碼分析





##基本知識

    首先介紹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

    <h1>This is the main domain</h1>
    <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;">
        <h3>iframe A</h3>
        <iframe src="http://a.com:8090/subAdomain.html" frameborder="1" style="width:300px; height:300px;"></iframe>
    </div>
    <div style="float:left;">
        <h3>iframe B</h3>
        <iframe src="http://b.com:8090/subBdomain.html" frameborder="1" style="width:300px; height:300px;"></iframe>
    </div>
    <div style="float:left;">
        <h5 id="received"></h5>
    </div>
    <script>
        var received = document.querySelector(&#39;#received&#39;);
        var sendToIframeA = document.querySelectorAll(&#39;input&#39;)[0];
        var sendToIframeB = document.querySelectorAll(&#39;input&#39;)[1];
        var iframeA = document.querySelectorAll(&#39;iframe&#39;)[0];
        var iframeB = document.querySelectorAll(&#39;iframe&#39;)[1];
 
        //receive message
        function getMessage(e){
            console.log(&#39;main received!&#39;);
            received.innerHTML = &#39;Receive message from &#39; + e.origin + &#39;, the data is &#39; + e.data;
            e.source.postMessage(&#39;Received the message&#39;, e.origin);
        }
        window.addEventListener(&#39;message&#39;, getMessage, false);
 
        //post message
        sendToIframeA.addEventListener(&#39;click&#39;, function(){
            var content = document.querySelector(&#39;textarea&#39;).value;
            iframeA.contentWindow.postMessage(content, &#39;http://a.com:8090&#39;);
        }, false);
        sendToIframeB.addEventListener(&#39;click&#39;, function(){
            var content = document.querySelector(&#39;textarea&#39;).value;
            iframeB.contentWindow.postMessage(content, &#39;http://b.com:8090&#39;);
        }, false);
    </script>

a.com

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

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

相關文章推薦：

HTML5應用程式：離線的應用程式以及儲存的應用程式############HTML5 canvas實作中獎轉盤的實例程式碼## ##########Html5中postmessage實作子父視窗傳值的程式碼#######

以上是HTML5中postMessage實作跨網域的程式碼分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 html Event 对象 事件 canvas github apache http
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：html5新增標籤有哪些？ html5新增的標籤應用下一篇：html5新增標籤有哪些？ html5新增的標籤應用

相關文章

看更多