ホームページ ウェブフロントエンド H5 チュートリアル postMessage を使用して H5 の 2 つの Web ページ間でデータを転送する方法

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

Jan 09, 2018 am 09:28 AM
html5 postmessage

今回は、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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTMLの表の境界線

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

HTML のネストされたテーブル

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML 左マージン

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブルのレイアウト

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML 内のテキストの移動

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリスト

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML の onclick ボタン

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML入力プレースホルダー

See all articles