Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

これらでもできるのであろうが、今回は別の方法として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/';
   }
}());

簡単な説明

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

  1. JavaScriptでURLの末尾に指定のハッシュがあるか検知
  2. あり:リダイレクトして終了
  3. なし:任意のリンク or ボタンにclickやなどのイベントを付与
  4. イベントが付与されたリンク or ボタンからイベントを発火
  5. 現在のURLの末尾に指定のハッシュを付与し画面遷移、またはsubmit
  6. 遷移先の画面からブラウザバックを実行
  7. 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で制御するやり方もあるが、ちょっと古いかな。まぁ、他にもいろんなやり方があるのでこういうやり方もあるよ、といったとこ。

clown0082
A Servant Leader of front-end team/an Executive/CEO(secondary) at Yumemi, Inc. We are the lions. CLI creator by nodejs, Riot.js(Collaborator), Challenge of an ordinary engineer.
http://kito0039.hatenablog.com
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away