HTML5 で postMessage を使用して 2 つの Web ページ間でデータを転送する

HTML5 API に window.postMessage API があることを知っている人はほとんどいないと思われます。 window.postMessage の機能は、プログラマがドメインを越えて 2 つのウィンドウ/フレーム間でデータ情報を送信できるようにすることです。基本的にはクロスドメイン AJAX に似ていますが、ブラウザとサーバーの間で対話するのではなく、2 つのクライアント間で通信します。 window.postMessage がどのように機能するかを見てみましょう。 IE6 と IE7 を除くすべてのブラウザがこの機能をサポートしています。

データ送信終了

最初に行う必要があるのは、データソース「ソース」である通信イニシエーターを作成することです。イニシエーターとして、新しいウィンドウを開くか、iframe を作成して、簡単にするために 6 秒ごとにデータを送信し、ターゲット ウィンドウからのフィードバック情報をリッスンするメッセージ リスナーを作成します。 。

//弹出一个新窗口   

    var domain = 'http://scriptandstyle.com';   

    var myPopup = window.open(domain    

                + '/windowPostMessageListener.html','myWindow');   

      

    //周期性的发送消息   

    setInterval(function(){   

     var message = 'Hello!  The time is: ' + (new Date().getTime());   

     console.log('blog.local:  sending message:  ' + message);   

            //send the message and target URI   

     myPopup.postMessage(message,domain);   

    },6000);   

      

    //监听消息反馈   

    window.addEventListener('message',function(event) {   

     if(event.origin !== 'http://scriptandstyle.com') return;   

     console.log('received response:  ',event.data);   

    },false);

ここでは window.addEventListener を使用しましたが、IE では window.attachEvent を使用するため、これは機能しません。ブラウザーの種類を特定したくない場合は、jQuery や Dojo などのツール ライブラリを使用できます。

ウィンドウが正常にポップアップすると、メッセージが送信されます。URI を指定する必要があります (必要に応じて、プロトコル、ホスト、ポート番号などを指定する必要があります)。メッセージ受信者は、この指定された場所にいる必要があります。 URI。ターゲットウィンドウが置き換えられた場合、メッセージは送信されません。

フィードバック情報を受け取るイベントリスナーも作成しました。非常に重要なことが 1 つあります。メッセージの送信元の URI を確認する必要があります。対象者からのメッセージが正当な場合にのみ処理できます。

iframe を使用している場合、コードは次のように記述する必要があります:

//捕获iframe   

    var domain = 'http://scriptandstyle.com';   

    var iframe = document.getElementById('myIFrame').contentWindow;   

      

    //发送消息   

    setInterval(function(){   

     var message = 'Hello!  The time is: ' + (new Date().getTime());   

     console.log('blog.local:  sending message:  ' + message);   

            //send the message and target URI   

     iframe.postMessage(message,domain);    

    },6000);

ノード オブジェクトではなく、iframe の contentWindow プロパティを使用していることを確認してください。

データ受信終了

次に開発するのは、データ受信終了ページです。同様に、受信側ウィンドウには「メッセージ」イベントをリッスンするイベント リスナーがあり、メッセージの送信元のアドレスも確認する必要があります。メッセージは任意のアドレスから送信される可能性があります。処理されるメッセージが信頼できるアドレスから送信されていることを確認してください。

//响应事件   

    window.addEventListener('message',function(event) {   

     if(event.origin !== 'http://davidwalsh.name') return;   

     console.log('message received:  ' + event.data,event);   

     event.source.postMessage('holla back youngin!',event.origin);   

    },false);

上記のコード スニペットは、メッセージが受信されたことを確認するためにメッセージ ソースに情報をフィードバックすることです。以下にいくつかの重要なイベント属性を示します:

source – メッセージ ソース、メッセージ送信ウィンドウ/iframe。
origin – データ ソースの検証に使用されるメッセージ ソースの URI (プロトコル、ドメイン名、ポートが含まれる場合があります)。
data – 送信者から受信者に送信されるデータ。

これら 3 つの属性は、メッセージ送信に使用する必要があるデータです。

window.postMessage の使用

他の多くの Web テクノロジーと同様、データ ソースの有効性を検証しない場合、このテクノロジーの使用は非常に危険になり、アプリケーションのセキュリティについてはユーザーが責任を負う必要があります。 window.postMessage は、JavaScript テクノロジーに対する PHP に似ています。 window.postMessage はクールですね。

上記は、postMessage を使用して HTML5 の 2 つの Web ページ間でデータを転送する内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。