[JavaScript] ブラウザの戻るボタンを禁止する方法

2015/10/10

1 min read

ブラウザの戻るボタンで戻れなくする方法

概要

ウェブアプリなどでは戻るボタンで前のページに戻られると予期せぬ動作をしてしまうことがある。これまでは戻れないように別ウィンドウで表示したりと色々と面倒な小細工をしていたが、History API に対応したブラウザであれば後述の JavaScript で戻る行為を禁止することができる。(普通のサイトでは使用の機会は少ないかもしれないが)

コード

if (history.pushState && history.state !== undefined) {
  history.pushState("aGlybzAyMTg=", null, "");

  window.addEventListener("popstate", function (e) {
    if (!e.originalEvent.state) {
      history.pushState("aGlybzAyMTg=", null, "");
      return;
    }
  });
}

History API に対応していないブラウザは個別に対応してやる必要がある。