HTML5 で追加された JavaScript の History API を使うと、ブラウザのヒストリ履歴(戻る/進む)の中身を操作できます。これを使って「戻る」を無効にしたページを作ってみます。jQuery を使うので、必要に応じてロードしておきます。

History API では pushState メソッドで履歴を1つ追加、popState メソッドで履歴を1つ(新しいものから)取り出します。この2つを組み合わせて、以下の様なロジックを実装しています:
- ページロード時に強制的にニセの1つ履歴を追加
- そのページ内で「戻る」イベントが発生したら(追加したニセの履歴が取り出されるので)、再度ニセの履歴を1つ追加して処理を終了(return)する

<script>
// History API が使えるブラウザかどうかをチェック
if( window.history && window.history.pushState ){
  //. ブラウザ履歴に1つ追加
  history.pushState( "nohb", null, "" );
  $(window).on( "popstate", function(event){
    //. このページで「戻る」を実行
    if( !event.originalEvent.state ){
      //. もう一度履歴を操作して終了
      history.pushState( "nohb", null, "" );
      return;
    }
  });
}
</script>

これでブラウザの「戻る」ボタンをクリックしても、本来の1つ前の URL ではなく、偽装した履歴が取り出されます。このままですとその偽装した履歴の URL に移動してしまう(今回は "" を指定しているので飛びようもありませんが)のですが、その前に return で強制的に処理を止めているので何も起こりません。また履歴を取り出した直後に再度ニセの履歴を追加しているので、更にもう一度「戻る」をクリックしても同じ処理が繰り返されて、結局戻れない、ということになります。

ちなみにこのブログのエントリの中にもこの JavaScript を埋め込んであります。なので、History API が使えるブラウザでこのページを見ている状態からは「戻る」を押してもどこにも戻れないはずです。


これ、うまく使うと「戻る」ボタンを押した時に本来とは異なるページに強制移動させることもできちゃったりするんじゃないかな。。