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

この記事の内容は、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. 領収書なしの情報:

2. 領収書のある情報:

基礎知識

まず、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 アプリケーション: オフライン アプリケーションとストアド アプリケーション

HTキャンバス サンプルコード勝利カルーセルを実装する

Html5 のポストメッセージを介して子ウィンドウと親ウィンドウ間の値の転送を実装するコード

以上がHTML5 の PostMessage はクロスドメイン コード分析を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。