私の 1 ページの Web アプリでは、一部のページに、ユーザーがブラウザー履歴の特定のポイントに戻るための戻るボタンが必要です。必ずしも前のページではありません。
ブラウザの戻るボタンについて話しているのではないことに注意してください。これは通常どおり機能するはずです。
使用事例
例として、gmail Web アプリについて考えてみましょう。場合によっては検索フィルターやその他のパラメーターを含むフォルダー ビューと、1 つのメッセージを表示するメッセージ ビューがあります。メッセージ ビューには、前のページに移動しない戻るボタンがあります。いくつかのメッセージをクリックして読み回した場合でも、戻るボタンをクリックすると、元のフォルダ ビューに戻ります。メッセージの。
gmail の場合、これは URL の最後に以前の状態をエンコードするだけで実現されます。たとえば、検索してこのメッセージにたどり着いた場合、次のようになります。
#search/stuff/<MESSAGE_ID>
このことから、アプリは、戻るボタンが次のページを指す必要があることを認識しています。
#search/stuff
しかし、私のアプリケーションでは、状態が多すぎてすべてを URL にエンコードできません。2 つのビュー (フォルダー + メッセージ) ではなく、3 つのビューがあります。それらを A、B、および詳細と呼びましょう。たとえば、B から A に、または詳細から B に戻ります。A、B、および詳細のすべてのパラメータを詳細ページの URL にエンコードすると、URL が非常に扱いにくくなります。
実装
これは、html5 history API を使用して簡単に実現できると思いました。ただし、私が知る限り、履歴 API は履歴内の URL の読み取りをサポートしていません。やみくもに戻るか進むことしかできません。
関連する質問で説明されているように、history.js は過去の状態へのアクセスを提供します。
History API: Javascript Pushstate、以前の URL を取得
しかし、私は history.js ではうまく動作しない angularjs を使用しています。これは、history.js を経由するのではなく、履歴 API と直接やり取りするため、angular $location サービスによって引き起こされた遷移の状態が履歴に表示されないためです。 .js の History オブジェクト。
次のいずれかを行う必要があるようです。
- history.js を angular でうまく機能させる
- 自分のコードで history.js の機能のサブセットを再実装する
document.referrer を使用して履歴の前の値を確認することも検討しましたが、1 ページ アプリ内を移動するときに設定されないため、これは機能しません。