ブラウザーの [戻る] ボタンと [進む] ボタンを操作しようとしている Ajax アプリに問題があります。jQuery History プラグインを使用してブラウザの履歴を有効にしています。
アプリは製品のページで構成されています。ユーザーがさまざまな値で製品を並べ替えることができる並べ替えバーがあります。ユーザーは、製品の衣類カテゴリ (ドレス、トップス、ボトムス、スカートなど)、サブカテゴリ部門 (スカート: ミニ、マキシ、ハイウエスト、自由奔放に生きる/ヒッピーなど)、サイズ (XS SML XL XXL XXXL)、色(白、黒、グレー、青、赤など)、時代、素材。
ほとんどのオプションは、Ajax を使用して最後に選択したオプションを適切な DIV にロードすることで有効になります。
たとえば、黒を選択するには、次のコードを実行します。
$('#colorSort').load('colorSort.php?color=Black');
次に、ユーザーがブラウンを選択した場合:
$('#colorSort').load('colorSort.php?color=Brown');
次に、ユーザーが黒の選択を解除した場合:
$('#colorSort').load('colorSort.php?colorRemove=Black');
戻る/進むボタンをサポートする必要がない限り、これは問題なく機能しますが、jQuery History を介して戻るボタン機能を追加すると、問題が発生します。例: 前の例を使用すると、ユーザーは黒と茶色の色を選択しました。ここで、ユーザーが戻るボタンをクリックしたとします。ユーザーは茶色の選択が削除されることを期待しますが、読み込まれる URL は次のとおりであるため、そうではありません。
colorSort.php?color=Black,
そしてそうではない
colorSort.php?colorRemove=Brown
それが必要なものです。
一連の「元に戻す」パラメータをクエリ文字列に追加することで、この問題を回避しようとしました。たとえば、
colorSort.php?color=Brown//colorRemove=Brown
二重スラッシュの前に現在のクエリ文字列が含まれ、スラッシュの後に「戻る」クエリ文字列が含まれます。したがって、このコードを使用すると、新しいリンクがクリックされたことがわかれば、現在のクエリ文字列 (スラッシュの前) を読み込むことができ、戻るボタンがクリックされたことがわかれば、スラッシュに続く「戻る」クエリ文字列を読み込むことができます。 .
しかし問題は、戻る/進むボタンがクリックされたかどうかを検出する方法がないように見えることです。jQuery History は hashchange イベントの下で動作し、そのイベントは (私が知る限り) どのイベントがそれを起動したかを区別しません。
これは私の問題です。StackOverflow.com の非常に賢い人々が解決策を見つけるのを手伝ってくれたら、とても感謝しています。ありがとうございました！