・インクリメンタルサーチや非同期通信でページを動的に変更している場合、そのページから次のページに遷移し、戻るボタンを押されたときに思わぬところまで戻ってしまう印象を与えることがある。
・これを回避するには、非同期処理でページを更新した時にURLを変更するか、ページ遷移する前にURLを変更する必要がある。
・URLを変更しつつリロードさせないという動きは、「history.pushstate(null,null,記録するURL);」というjavascriptで実現する。
使い方
$(".article_list_item a").on('click',function(event){
event.preventDefault();
var linkUrl = $(this).attr('href');
// リンク先への遷移前にURL履歴を残す
history.pushState(null,null,"list.php?word=" + vmList.word + "&category=" + vmList.category + "&tag=" + vmList.tag);
function action() {
location.href = linkUrl;
}
setTimeout(action,1000);
});
※SPA:シングルページアプリケーションで戻るボタンに対応するには、この方法が使われている。(history.pushState)
参考
https://designsupply-web.com/media/programming/2995/
https://qiita.com/buntafujikawa/items/ebe1f9a87696b116f175
・公式
https://developer.mozilla.org/ja/docs/Web/API/History/pushState
・SPAのページバックについて
https://qiita.com/ozaki25/items/41e3af4679c81a204284