コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > postMessage を使用して HTML5_html5 で Ajax クロスドメイン リクエストを実装する方法のチュートリアル スキル

postMessage を使用して HTML5_html5 で Ajax クロスドメイン リクエストを実装する方法のチュートリアル スキル

WBOY
リリース： 2016-05-16 15:51:55
オリジナル
1578 人が閲覧しました

同一オリジンポリシーの制限により、JavaScript にはクロスドメイン通信の問題が発生します。典型的なクロスドメインの問題には、iframe と親の間の通信などが含まれます。

いくつかの一般的な解決策:

(1) document.domain iframe;
(2) スクリプトを動的に作成します。
(3) iframe location.hash;
(4) フラッシュ。

ここではこれらのメソッドについては詳しく説明しません。記録されるのは HTML5 の window.postMessage です。
postMessage は、IE8、Firefox、Opera、Safari、Chrome と互換性があります。

テストには 2 つの外部サーバーが必要です もちろん、ローカル サーバーとオンライン サーバーを 2 つの外部サーバーとして使用することもできます。
phonegap を使用して開発する場合は、クライアントにリクエスト ファイルをインストールし、サーバーのデータ処理を動的にリクエストしてデータを取得し、表示することができます。このようにして、任意の Web 開発言語と手法を使用して、phonegap アプリに必要なバックエンドを開発できます。

1. postMessage の使用法

postMessage は、JS クロスドメインの問題を解決するために HTML5 によって導入された新しい API であり、複数の iframe/ウィンドウを許可します。クロスドメイン通信。

構造は次のとおりであると仮定します。

JavaScript コードコンテンツをクリップボードにコピーします
  1. test.html
    "ラッパー">
  2. <ヘッダー

  3. postMessage (クロスドメイン)

  5. <記事>
  6. <フォーム>

  10. <入力タイプ=「テキスト」 名前=「メッセージ」 値="息子" id="メッセージ"/>
  11. <入力タイプ="送信"/>

  14. ターゲット iframe からの情報:

  15. "テスト">情報はまだありません


iframe.html

JavaScript コード
コンテンツをクリップボードにコピーします
  1. iframe は xiebiji.com を指します
  3. <入力タイプ=「テキスト」 名前=「メッセージ」 値=「お父さん」 id=「メッセージ」/>
  4. <入力タイプ="送信"/>

  5. "テスト">まだ情報がありません。

    以下は test.html の Javascript コード (データ送信) です: var win = document.getElementById("iframe" ).contentWindow;document.querySelector('form').onsubmit=function(e){
    6. win.postMessage(document.getElementById(
  6. "メッセージ").value,"*");
  7. if (e.preventDefault)
    8. e.preventDefault();
    9. e.returnValue =
  9. false; }
    11. キーコードは 1 つの文です:

JavaScript コード

コンテンツをクリップボードにコピーします
win.postMessage(document.getElementById(
  1. "メッセージ").value,"*");
    2. PostMessage は通信オブジェクトのメソッドであるため、iframe と通信するには、iframe オブジェクトは postMessage メソッドを呼び出します。 postMessage には 2 つのパラメータがあり、そのうちの 1 つは必須です。第一引数は渡すデータ、第二引数は通信を許可するドメインです。 「*」はアクセスされたドメインを判定しないことを意味し、すべてのドメインで通信を許可すると解釈できます。
次に、データの受信をリッスンする iframe.html のコードがあります。



JavaScript コード

コンテンツをクリップボードにコピーします
var
  1. parentwin = window.parent;window.onmessage=function(e){ document.getElementById(
    2. "test"
  2. ).innerHTML = e.origin "say:" e.データ; parentwin.postMessage(
    3. 'こんにちは! "'
  3. e.data '" を送信しました。 . '、"*");};

    とても簡単なので一目で分かると思います。 e.data には送信されたデータが含まれ、e.origin は送信元ドメインを指します。

    そして、iframe.html も test.html に応答データを送信し、test.html はそのデータを受信します。コードが似ている場合は、コードを投稿しません。

    2. Ajax クロスドメイン リクエスト

    上記のクロスドメイン通信に基づいて、iframe の onmessage 処理関数に Ajax コードを配置するだけです。 html、postMessage によって渡されたデータをパラメータとして使用してリクエストを test.html に送信し、返されたデータを postMessage を使用して test.html に渡します。このようにして、クロスドメイン Ajax リクエストが実装されます。実はとても単純なことなのです。

    サンプルコードを投稿しますが、上記のコードとは関係ありません。

    JavaScript コードコンテンツをクリップボードにコピーします
    1. (function(){ //クロスドメイン データを取得 window.onmessage = function(e){
    2. var url = "http://yangzebo.com/demo/noforget/test.php?msg=" e.data;
    3. //Ajax var xhr = getXHR();
    4. if(xhr){
    5. xhr.open("GET",url,true);
    6. xhr.onreadystatechange = 変更ハンドル
    7. xhr.send(null) }else{
    8. alert("Ajax はサポートされていません") }
    9. 関数 changeHandle(){//Return 処理
    10. if(xhr.readyState == 4){
    11. varparentwin = window.parent
    12. parentwin.postMessage(xhr.responseText,"*");//ドメイン間でのデータの送信
    13. } }
    14. function getXHR(){//Get XMLHttpRequest
    15. var xhr_temp; if(window.XMLHttpRequest){
    16. xhr_temp = new XMLHttpRequest();
    17. }else if(window.ActiveXObject){
    18. xhr_temp = new ActiveXObject("Microsoft.XMLHTTP");
    19. }else{
    20. xhr_temp = null;
      21. }
      22. xhr_temp を返す
      23. } };})();

      24. Kemudian berikan demo yang tidak sedap dipandang.

      Jika anda berminat dengan permintaan kod, sila gunakan alat pembangun untuk menyemaknya "zebo man" dibaca daripada pangkalan data, dan "my msg" ialah parameter permintaan Ajax yang dihantar oleh sendAndReceive. .html ke test.php , dihantar kembali ke sendAndReceive.html melalui test.php dan iframeforAjax.html.

      3. Petua
      Anda perlu mendapatkan contentWindow iframe untuk memanggil postMessage.

      postMessage mesti dipanggil selepas iframe dimuatkan untuk berjalan seperti biasa. (Ini mengambil masa yang lama untuk saya)

関連ラベル：
postmessage
ソース：php.cn
前の記事：HTML5 Canvas API_html5 チュートリアルのヒントの clearRect() メソッドを使用した消しゴム関数の実装 次の記事：Web ページで電話番号によるワンクリックの直接通話効果を実現する方法_例付き_html5 チュートリアル スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
AJAX POST リクエストのフィールドを更新する jQuery または Javascript を使用して、AJAXPOST リクエストのカスタム フィールドを動的に更新しようとしています。 AJAXPOST リクエストは、Word...
から 2024-04-02 11:45:41
0
1
360
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート