PostMessageドメイン間、ウィンドウ間メッセージングの解決

2662 ワード

普段ウェブの开発をする时メッセージングについて、クライアントとサーバーの価値を伝える以外にいくつかよく出会う问题があります.ページとその開いた新しいウィンドウのデータ転送2.マルチウィンドウ間のメッセージング3.ページとネストiframeメッセージング4.上記の3つの問題のドメイン間データ伝達にはいくつかの解決策があるが、html 5が導入したmessageのAPIは、これらの難題をより便利で、効果的で、安全に解決することができる.postMessage()メソッドでは、異なるソースからのスクリプトが非同期で限られた通信を行うことができ、テキスト・アーカイブ、マルチウィンドウ、ドメイン間メッセージングを実現することができます.
postMessage(data,origin)メソッドは2つのパラメータを受け入れる
1.data:伝達するデータ.html 5仕様では、このパラメータはJavaScriptの任意の基本タイプまたは複製可能なオブジェクトであってもよいが、すべてのブラウザがこれを行ったわけではなく、一部のブラウザでは文字列パラメータしか処理できないため、パラメータを伝達する際にJSONを使用する必要がある.stringify()メソッドはオブジェクトパラメータをシーケンス化し、低バージョンIEでjson 2を参照する.jsは類似の効果を実現することができる.
2.origin:文字列パラメータ、ターゲットウィンドウのソース、プロトコル+ホスト+ポート番号[+URL]を示す.URLは無視されるので、書かなくてもよい.このパラメータは安全のため、postMessage()メソッドは指定ウィンドウにmessageのみを渡す.もちろん、パラメータを「*」に設定して任意のウィンドウに渡すこともできる.現在のウィンドウと同じソースを指定する場合は「/」に設定します.
親ページ




    Post Message


    
        Frame Color
    
    
        
    </div>

    <disable_script type="text/javascript">

        window.onload=function(){
            window.frames[0].postMessage('getcolor','http://lslib.com');
        }

        window.addEventListener('message',function(e){
            var color=e.data;
            document.getElementById('color').style.backgroundColor=color;
        },false);
    </disable_script>


</code></pre>  <br>iframeページ<pre><code>

    
        <style type="text/css">
            html,body{
                height:100%;
                margin:0px;
            }
        </style>
    
    
        <div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
            click to change color
        </div>
        <disable_script type="text/javascript">
            var container=document.getElementById('container');

            window.addEventListener('message',function(e){
                if(e.source!=window.parent) return;
                var color=container.style.backgroundColor;
                window.parent.postMessage(color,'*');
            },false);

            function changeColor () {            
                var color=container.style.backgroundColor;
                if(color=='rgb(204, 102, 0)'){
                    color='rgb(204, 204, 0)';
                }else{
                    color='rgb(204,102,0)';
                }
                container.style.backgroundColor=color;
                window.parent.postMessage(color,'*');
            }
        </disable_script>
    

</code></pre>

echartsグラフについては、親要素の幅に応じて適応します.

微信が開発し、原生を模倣して「もう一度押す」機能を実現