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

今回は、H5 で postMessage を使用して 2 つの Web ページ間でデータを転送する方法を説明します。 2 つの postMessage 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 を使用するため、これは IE では機能しません。ブラウザの種類を特定したくない場合は、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 は、PHP と JavaScript テクノロジーのようなものです。 window.postMessage はクールですね。

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

関連書籍:

vue.js 書籍管理プラットフォームを構築する詳細な手順

ブートストラップでテーブルの合計数を数える方法

JS を使用してボタンを無効化および有効化する方法

以上がpostMessage を使用して H5 の 2 つの Web ページ間でデータを転送する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。