postMessage はクロスドメインおよびクロスウィンドウメッセージングを実装します。-H5 チュートリアル-php.cn

postMessage はクロスドメインおよびクロスウィンドウメッセージングを実装します。

php中世界最好的语言

リリース： 2018-03-26 13:26:34

オリジナル

2900 人が閲覧しました

今回は、クロスドメインおよびクロスウィンドウメッセージングを実装するための postMessage について説明します。クロスドメインおよびクロスウィンドウメッセージングを実装するために postMessage が実装できる注意事項について説明します。

Web 開発を行う場合、クライアントとサーバー間の値の転送に加えて、よく遭遇する問題がいくつかあります

1. ページと開いた新しいウィンドウ間のデータ転送

2.ページ間のメッセージ

3. ページとネストされた iframe 間のメッセージ

4. 上記 3 つの問題のクロスドメインデータ転送

postMessage()

これらの問題にはいくつかの解決策がありますが、html5 で導入されたメッセージAPI はこれらの問題をより便利、効果的、安全に解決できます。 postMessage() メソッドを使用すると、さまざまなソースからのスクリプトが制限された方法で非同期通信できるようになり、クロステキストファイル、マルチウィンドウ、およびクロスドメインメッセージングを実現できます。

postMessage(data,origin) メソッドは 2 つのパラメータを受け入れます

1.data: 渡されるデータ。ただし、すべてのブラウザでパラメータが使用できるわけではありません。一部のブラウザでは文字列パラメータのみを処理できるため、パラメータを渡すときに JSON.stringify() メソッドを使用してオブジェクトパラメータをシリアル化する必要があります。これにより、IE の以前のバージョンでも同様の効果を得ることができます。

2.origin: ターゲットウィンドウのソースを示す文字列パラメータ、プロトコル + ホスト + ポート番号 [+URL]、URL は無視されるため、記述する必要はありません。このパラメータはセキュリティのためのものです。 postMessage() メソッドメッセージは指定されたウィンドウにのみ渡されます。もちろん、必要に応じて、パラメータを「*」に設定することもできます。これを任意のウィンドウに渡すことができます。現在のウィンドウを原点とする場合は、「/」に設定します。

http://test.com/index.html

<p style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
        <p id="color">Frame Color</p>
    </p>
    <p>
        <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>
 </p>

ログイン後にコピー

http://test.com の postMessage() メソッドを通じて、クロスドメイン iframe ページ http://lsLib.com/lsLib にメッセージを送信できます。 /index.html .html メッセージを送信します

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

ログイン後にコピー

メッセージを受信します

test.com 上のページは lslib.com にメッセージを送信します。では、lslib.com ページでメッセージを受信するにはどうすればよいでしょうか?ウィンドウのメッセージイベント

http://lslib.com/lslib.html

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

ログイン後にコピー

このようにして、安全上の理由から、現時点では MessageEvent オブジェクトを使用してメッセージのソースを決定します。 message.MessageEvent は次のようなものです

にはいくつかの重要な属性があります

1.data: 名前が示すように、それはメッセージです

2.source: メッセージを送信するウィンドウオブジェクト

3.origin: メッセージ送信ウィンドウのソース (プロトコル + ホスト + ポート番号)

このようにして、クロスドメインメッセージを受信でき、メッセージを送り返すこともできます。方法は同様です。

簡単なデモ

この例では、右側の iframe の p の色の変化に応じて、左側の p も変化します

<!DOCTYPE html>
<html>
<head>
    <title>Post Message</title>
</head>
<body>
    <p style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
        <p id="color">Frame Color</p>
    </p>
    <p>
        <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>
    </p>
    <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);
    </script>
</body>
</html>
http://test.com/index.html

ログイン後にコピー

<!doctype html>
<html>
    <head>
        <style type="text/css">
            html,body{
                height:100%;
                margin:0px;
            }
        </style>
    </head>
    <body style="height:100%;">
        <p id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
            click to change color
        </p>
        <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,'*');
            }
        </script>
    </body>
</html>
http://lslib.com/lslib.html

ログイン後にコピー

この例では、ページがロードされると、ホームページは iframe に 'getColor' リクエストを送信します (パラメーターは実用的ではありません)

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

ログイン後にコピー

iframe はメッセージを受信し、現在のカラーをメインページに送信します

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

ログイン後にコピー

メインページは、メッセージが表示され、その p の色が変更されます

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

ログイン後にコピー

iframe がクリックされると、その色変更メソッドがトリガーされ、最新の色がメインページに送信されます

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,'*');
            }

ログイン後にコピー

メインページは今もモニターを使用しています。メッセージイベントの色が変わります

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

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

spring mvc+localResizeIMG は H5 画像圧縮とアップロードを実現します

H5は回転する立体ルービックキューブを実現

以上がpostMessage はクロスドメインおよびクロスウィンドウメッセージングを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。