history.pushStateを使用して、ブラウザの戻る処理をコントロールする

2018年2月4日

画面遷移せずにAJAXで画面を表示している時、ブラウザの戻るボタンを押してしまうと前の画面に移動してしまいます。
それを防ぐ方法としてhistory.pushStateが使用できるようです。

以下はサンプルです。

次のページへボタン
---
戻る

  var page = 1;
  document.getElementById('go_next').addEventListener('click', function(e){
    e.preventDefault();
    page++;
    document.getElementById('result').innerHTML = 'PAGE:'+page+'(click)';
    var name = document.getElementById('name').value.trim();
    var href = location.pathname + "?";
    href += "page=" + page;
    href += "&name=" + encodeURIComponent(name);
    history.pushState(null, null, href);
    return false;
  });
  window.addEventListener('popstate', function(e) {
    if(window.location.search.length > 1){
      var p = window.location.search.substring(1).split('&'), params = {};
      for (var i = 0; i < p.length; i++) {
          var tmp = p[i].split('=');
          if(tmp[0] && tmp[1]){
            params[tmp[0]] = escape_html(decodeURIComponent(tmp[1]).trim());
          }
      }
      document.getElementById('name').value = (params["name"] ? params["name"] : "");
      document.getElementById('result').innerHTML = 'PAGE:'+(params["page"] ? params["page"] : "")+'(popstate)';
    }
  },false);
  var escape_html = function escape_html(string) {
    if(string == '') {
      return '';
    }
    if(typeof string !== 'string') {
      return string;
    }
    return string.replace(/[&'`"<>]/g, function(match) {
      return {
        '&': '&',
        "'": ''',
        '`': '`',
        '"': '"',
        '<': '<',
        '>': '>',
      }[match]
    });
  }

参考リンク

1. popstate - Event reference | MDN
2. JavaScriptでURLを操作するメモ - Qiita
3. JavaScriptでHTMLエスケープ処理 - Qiita

• Tweet