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

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
