コピペでOK！ブラウザの戻るボタンを禁止する方法[ jQuery / javascript ]
コピペをするだけブラウザの戻るボタンを動作させなくする方法をご紹介します。
Contents
jQueryとjavascriptでブラウザの戻るボタンを禁止する方法
こちらのコードを<head>〜</head>などに記述することでブラウザの戻るボタンが効かなくなります。
html5のブラウザのみ対応する場合
|
1 2 3 4 5 6 7 8 9 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(function(){ history.pushState(null, null, null); $(window).on("popstate", function(){ history.pushState(null, null, null); }); }); </script> |
html5でないブラウザも対応する場合
|
1 2 3 4 5 6 7 8 9 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ location.hash = "#prepage"; $(window).on("hashchange", function(){ location.hash = "#prepage2"; }); }); </script> |
ソースコードの解説
通常はAのページからBのページに移動する際には当然ブラウザの履歴も
1.Aページ
↓
2.Bページ
となりますが
|
1 |
history.pushState(null, null, null); |
こちらの記述をすることで
1.Aページ
↓
↓ Bページを一つ前に表示していたページとして履歴に追加
↓
2.Bページ
というように
AのページからBのページに移動した際にBの履歴が挿入されます。
よって、Bのページで戻るボタンを押しても、Bページに移動するので
見た目上戻るが効かなくなったように見えます。
しかし当然ながら2回戻ってしまうとAページに戻ってしまいます。
そこで
|
1 2 3 |
$(window).on("popstate", function(){ history.pushState(null, null, null); }); |
も記述することで
1.Aページ
↓
↓ Bページを一つ前に表示していたページとして履歴に追加
↓
2.Bページ
3.Bページ
↓
↓戻る際に、Bページを一つ前に表示していたページとしてさらに履歴に追加
↓
4.Bページ（戻る時に追加された履歴）
↓
↓戻る際に、Bページを一つ前に表示していたページとしてさらに履歴に追加
↓
5.Bページ（戻る時に追加された履歴）
↓
…戻るたびにBページが追加されるので、何度戻るボタンを押してもBページが表示される
というように戻る際にもBページが挿入されるので、実質戻るボタンが無効化されたことになります。
html5対応のブラウザで解説しましたが、html5でないブラウザのソースも理屈は同じです。
制作のご依頼・ご相談はこちら
dainamoでは魅力的なWEBサイトや、アプリ、ツール、ポスター、パンフレット、チラシなど幅広く承っております。ご相談、見積もり、お問い合わせなど、お気軽にご連絡ください。
＼ SNSでシェアしよう！ ／
web制作・デザイン・システム開発・管理なら dainamo（ダイナモ）の注目記事を受け取ろう
− web制作・デザイン・システム開発・管理なら dainamo（ダイナモ）
この記事が気に入ったら
いいね！しよう
web制作・デザイン・システム開発・管理なら dainamo（ダイナモ）の人気記事をお届けします。
-
気に入ったらブックマーク！
- フォローしよう！ Follow @dainamo_jp
