ネットで調べるとだいたい以下の様な対応策をよく目にする。

onunloadやonpageshowイベントで何かしらの制御
ブラウザバック時に画面リロード
（そもそもキャッシュさせない、というのもあった）

これらでもできるのであろうが、今回は別の方法としてURLにハッシュを付ける方法のメモ。個人的にはこっちの方が分かりやすく、かつ使う場面がイメージしやすくて気に入ってる。（以下の例ではログアウト後のブラウザバックの対応）

対応策のコード

まずは画面遷移するためのボタンやリンクにhogeというid属性を付与。

ボタンの例

<!-- form内のボタン -->
<form method="post" action="/logout">
  <button type="button" id="hoge">logout</button>
</form>


<!-- 単にリンクが貼ってあるボタン -->
<a href="/logout" id="hoge">
  <input type="button" id="hoge" value="logout">
</a>

<!-- そもそもリンクにハッシュを付けても良い -->
<a href="/logout#logout">
  <input type="button" id="hoge" value="logout">
</a>

上記のボタンにclickイベントリスナーを付与し、コールバック関数の中で#logoutというハッシュを付与。上記の3つ目の例のようにハッシュをつけたリンクを貼ってもいいが、これは使いどころが限定されるので汎用性は低いかと。

素のJavaScript

// submitやリンクによる画面遷移前に実行
var target = document.getElementById('hoge');

target.addEventListener('click', function() {
   window.location.hash = '#logout';
});

jQuery

$('#hoge').on('click', function() {
   window.location.hash = '#logout';
});

// ※他のイベントリスナーによりうまく動かない場合はこう
$(document).on('click', '#hoge', function() {
   window.location.hash = '#logout';
});

最後に、画面アクセス時に#logoutというハッシュがあるかを確認し、あればブラウザバックをした時の画面に戻すか、任意の画面にリダイレクトする。


(function() {
   if (location.hash === '#logout') {
      // 画面を戻す
      history.forward();

      // リダイレクト
      location.href = '/path_to_any_page/';
   }
}());

簡単な説明

流れを簡単に説明するとこう。

JavaScriptでURLの末尾に指定のハッシュがあるか検知
あり:リダイレクトして終了
なし：任意のリンク or ボタンにclickやなどのイベントを付与
イベントが付与されたリンク or ボタンからイベントを発火
現在のURLの末尾に指定のハッシュを付与し画面遷移、またはsubmit
遷移先の画面からブラウザバックを実行
1に戻り、2で終了

余談

そもそも遷移先のURLにハッシュをつければ、jsでハッシュを付与する処理は不要なのだが、実際の現場では意外とハッシュが目に見えるのを嫌うお客さんが多いので、見えない形にするならこのやり方になるかなと。

あとは以下のように、


<form name="form_logout" method="post" action="/logout">
  <input type="button" id="hoge" value="logout">
</form>


var target = document.getElementById('hoge');

target.addEventListener('click', function() {
   window.location.hash = '#logout';
   document.form_logout.submit();
});

buttonタグじゃなくinputタグのボタンを設置し、submitもjsで制御するやり方もあるが、ちょっと古いかな。まぁ、他にもいろんなやり方があるのでこういうやり方もあるよ、といったとこ。

ハッシュを用いたブラウザバック問題の対応策

対応策のコード

簡単な説明

余談