概要
表題の件でイライラしていたのですが、HistoryAPIで無理やり解決しました。
が、結論から言うとこのやり方はオススメしません!笑
Amazonに倣って、
「もっと見る」よりも、素直に「次のページ」を表示しましょう。
問題
- ajax実装された「もっと見る」を押して、リスト末尾に20件とか追加される。
- リストからアイテムを選び、アイテム詳細ページに遷移。
- ブラウザバックする。
- DOMの状態が初期化されているので、末尾に追加された20件は消えている。
→もっと奥にあるアイテムを見るには、また「もっと見る」を押さないといけない。
イライラする!!
解決方法
- 詳細ページに遷移するタイミングで、現在開かれているページ数をURLに追加し(?page_num=2)として、HistoryAPIで履歴に追加もしくは書き換え。
- 「戻る」を押すと「hogehoge.com/items?page_num=2」が開かれるので、(page_numの値x20)件を初期表示。
- 併せて「もっと見る」押下時に追加されるリストのoffsetを(page_numの値x20+1)に変更する。
結論
ゴリ押しですが、ブラウザバック時のイライラは無くなります。
が!!
ここで無理やり頑張るぐらいなら、
「もっと見る」では無く「次のページ」を表示して、AjaxでDOMとブラウザ履歴を書き換えてしまえば良さそう。
AmazonのUIが実装しやすそうで、かつユーザーとしても快適。