- Products -


Software


NEWS


Special



- Knowledge -


Category × Tag



- Like -

公開
作成日:2021/12/15
更新日:2021/12/15

戻るボタンと非同期処理をうまく操る方法

・ブラウザの戻るボタンを押した時、前のURLに戻る。これが基本。

・インクリメンタルサーチや非同期通信でページを動的に変更している場合、そのページから次のページに遷移し、戻るボタンを押されたときに思わぬところまで戻ってしまう印象を与えることがある。

・これを回避するには、非同期処理でページを更新した時に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


Category



Tag




関連記事


{{tmp.name}}

{{article.category}} {{article.title}}