19

よく知られているように、XHR (別名 AJAX) Web アプリケーションでは、アプリの履歴が構築されず、更新ボタンをクリックすると、ユーザーが現在のアクティビティから移動することがよくあります。更新の問題を回避するために、 location.hash (例) に遭遇しました ( http://anywhere/index.html#somehashvaluelocation.hash を使用してアプリに現在の状態を通知し、ページ読み込みハンドラーを使用してその状態をリセットします)。それは本当に素敵でシンプルです。

これにより、location.hash を使用してアプリの履歴を追跡することを考えるようになりました。既存のライブラリは iframe などを使用するため、使用したくありません。アプリケーション ページがロードされたら、次のように開始します。

setInterval(
       function(){
           if (location.hash !== appCache.currentHash) {
               appCache.currentHash = location.hash;
               appCache.history.push(location.hash);
               /* ... [load state using the hash value] ... */
               return true;
           }
           return false;
       }, 250
 );

( appCacheは、アプリケーション変数を含む事前定義されたオブジェクトです) アイデアは、アプリケーション内のすべてのアクションをハッシュ値からトリガーすることです。適切なブラウザーでは、ハッシュ値の変更により履歴にエントリが追加されますが、IE (<= 7) では追加されません。すべてのブラウザーで、別のハッシュ値を持つページに戻るか進むと、ページの更新はトリガーされません。それが intervalled 関数が引き継ぐところです。この関数を使用すると、ハッシュ値の変更が (プログラムによって、または前後にクリックすることによって) 検出されるたびに、アプリは適切なアクションを実行できます。アプリケーションはそれ自体の履歴を追跡でき、アプリケーションに履歴ボタンを表示できるはずです (特に IE ユーザー向け)。

私が知る限り、これはクロス ブラウザで機能し、メモリやプロセッサ リソースのコストはかかりません。私の質問は、これは XHR アプリで履歴を管理するための実行可能なソリューションでしょうか? 長所と短所は何ですか？

更新:自作フレームワークを使用しているため、既存のフレームワークのいずれかを使用したくありませんでした。location.hash を IE で使用できるようにし、その履歴にも含めるために、役に立つかもしれない簡単なスクリプト (はい、iframe が必要です) を作成しました。私はそれを自分のサイトに公開しました。自由に使用/変更/批判してください。

4

3 に答える 3

8

ほとんどのソリューションで一緒に処理される傾向がある 3 つの問題があります。

  1. 戻るボタン
  2. ブックマーク機能
  3. 更新ボタン

ベースのwindow.location.hashソリューションは、ほとんどの場合に 3 つすべてを解決できます。値hashはアプリケーション/Web ページの状態にマップされるため、ユーザーは「戻る」/「進む」/「更新」のいずれかを押して、現在の状態にジャンプできます。ハッシュ。アドレスバーの値が変更されたため、ブックマークもできます。iframe(ブラウザーの履歴に影響を与えないハッシュに関連する IE には隠しファイルが必要であることに注意してください)。

window.location.hashただし、非常に効果的なソリューションを監視せずに iframe のみのソリューションを使用できることに注意してください。

Google マップはその好例です。ユーザー アクションごとにキャプチャされた状態は、window.location.hash に配置するには大きすぎます (地図の重心、検索結果、衛星ビューと地図ビュー、情報ウィンドウなど)。そのため、状態を hidden に埋め込まれたフォームに保存しますiframe。ちなみに、これは[ソフト]「リフレッシュ」の問題も解決します。「このページへのリンク」ボタンを使用して、ブックマーク可能性を個別に解決します。

あなたが考えている問題のドメインを知る/分離する価値があると思いました。

于 2009-03-01T14:20:28.900 に答える
5

ユーザーが前進したのか後退したのかを知るのは難しいと思います。URLが/myapp＃page1で始まるとすると、状態の追跡を開始します。次に、ユーザーはURL / myapp＃page2を作成するために何かを実行します。次に、ユーザーはURL / myapp＃page1を再度作成するために何かを実行します。現在、彼らの歴史は曖昧であり、あなたは何を取り除くべきかどうかわからないでしょう。

履歴フレームワークは、iframeを使用して、言及したブラウザーの不整合を回避します。iframeを必要とするブラウザでのみiframeを使用する必要があります。

もう1つの欠点は、ユーザーがカスタムの戻るボタンに移動する前に、常にブラウザの戻るボタンに移動することです。250msごとに履歴を読むのが遅れるのも気になります。インターバルをもっと短くすることもできるかもしれませんが、それでパフォーマンスが悪くなるかどうかはわかりません。

私はyuiの履歴マネージャーを使用しました。すべてのブラウザー（特にie6）で常に完全に機能するわけではありませんが、多くのユーザーや開発者によって使用されています。彼らが使用するパターンもかなり柔軟です。

于 2009-02-20T17:02:55.590 に答える
2

これらはすべて、あらゆる種類のブラウザーをサポートするために重要ですが、その必要性がなくなることを願っています。IE8 と FF3.6 の両方で、 onhashchange のサポートが導入されました。他の人もそれに続くと思います。タイムアウトまたは iframe を使用する前に、この機能が利用可能かどうかを確認することをお勧めします。これは、現在最も優れたソリューションであり、IE でも機能するためです。

于 2010-03-29T12:26:41.860 に答える