初めに
業務の中でブラウザバックを禁止したい場面は多々あると思います。
今日はブラウザバックを禁止する方法について書いてみたいと思います。
試したコード
作成コード
back.html
⇒ ブラウザバックを禁止するページのhtml
error.html
⇒ ブラウザバックを押下した場合に遷移させるhtml
moto.html
⇒ back.htmlにブラウザバック用の履歴を積むための遷移元ページのhtml
stop-brawser-back.js
⇒ ブラウザバックを防ぐためのコードが書いてあるjs
詳細
back.html
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="stop-brawser-back.js"></script>
</head>
test
</html>
error.html
<html>
ブラウザバックを押したな！
</html>
moto.html
<html>
<p>遷移元</p>
<a href="back.html">遷移先</a>
</html>
stop-brawser-back.js
$(() => {
history.pushState(null, null);
$(window).on("popstate", (e) => {
location.href = "error.html"
});
});
動作検証
遷移元画面のhtml(moto.html)を開いて遷移先リンクを押下
 |
|---|
遷移先の画面でブラウザbackを実施
 |
|---|
| ※Goocle Chromeの場合はこの手順で一度画面をクリックする必要があります…この制約が少しつらいですが、ブラウザの仕様のためどうすることもできないです。良い方法があれば教えてほしいです。 |
ブラウザback時に別のページに遷移する
 |
|---|
終わりに
本当に使用するとなったらerror.htmlにも工夫が必要になります。そのまま同じページに遷移させるとか工夫はいろいろできると思います。
Chromeの場合にフォーカスしないとpopstateのイベントが動かないのが気になりますね…
解決方法を知っている方がいたら教えてください！！