HTML5 の PostMessage はクロスドメインコード分析を実装します-H5 チュートリアル-php.cn

HTML5 の PostMessage はクロスドメインコード分析を実装します

不言

リリース： 2018-08-08 10:51:15

オリジナル

2328 人が閲覧しました

この記事の内容は、HTML5 での postMessage のクロスドメイン実装のコード分析に関するものです。必要な方は参考にしていただければ幸いです。

多くの人は、H5 を使用してクロスドメインを実現することについて半分理解しています。 postMessage を使用してメッセージを送信し、onMessage を使用してメッセージを受信することはわかっていますが、どのメソッドを window を使用して呼び出す必要があり、どのメソッドを iframe の contentWindow を使用して呼び出す必要があるかはあまり明確ではありません。以下は、クロスドメインをローカルに実装するために作成した小さなデモです。この例は 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 などのサーバーを起動し、3 つの HTML を配置する必要があります。ファイルは github からサーバー上にダウンロードされます。最後に、http://main.com: ポート番号にアクセスするだけで、ドメイン間で通信できます。

3 つの HTML ファイル間の関係は次のとおりです: 3 つのドメイン: http://main.com:8090; http://b.com:8090。メインページ maindomain.html は main.com にあり、2 つの iframe (subAdomain.html、 subBdomain.html) それぞれ a.com、b.com 。 maindomain.html のテキストエリアにメッセージを入力し、[iframe に送信] ボタンをクリックして、指定した iframe にメッセージを送信します。 (サブドメイン.html または subBdomain.html)、iframe で maindomain.html にメッセージを送信することもできます。同時に、iame メッセージを受信するための受信メッセージもあります。

これは、Web サイトのパブリックリソースを特定のサブドメインに配置し、他のサブドメインがこのサブドメイン上のリソースにアクセスする必要があるという非常に一般的なシナリオです。得られる効果は以下の通りである。

1. 領収書なしの情報:
HTML5 の PostMessage はクロスドメインコード分析を実装します

2. 領収書のある情報:
HTML5 の PostMessage はクロスドメインコード分析を実装します

基礎知識

まず、onMessage イベントのイベントの属性をいくつか紹介します。これらを理解すると、私の例を理解しやすくなります。
* データ: 受信データ
* オリジン: メッセージを送信するドキュメントが存在するドメイン
* ソース: メッセージを送信するドキュメントのウィンドウオブジェクトのプロキシ
サブドメイン X のメッセージをサブドメインに送信する場合Y、必要があります。サブドメイン X の HTML ファイルで、Y のウィンドウオブジェクト (iframe の contentWindow) を取得し、postMessage(message, 同時に、サブドメイン Y の HTML ファイルで、ウィンドウオブジェクトのメッセージイベントをリッスンするだけです (onMessage を使用)。もちろん、onMessage で postMessage を再度使用して、サブドメイン X に受信メッセージを送信することもできます。よく混乱するのは、どのドメインのウィンドウオブジェクトで postMessage を呼び出すかということです。

code

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 の PostMessage はクロスドメイン コード分析を実装します

HTML5 の PostMessage はクロスドメインコード分析を実装します