HTML/JavaScript集 > JavaScriptメモ > ブラウザの戻る禁止
JavaScript だけでブザウザの戻るを禁止する方法。
・HTML5対応のブラウザであれば、History API を使用して制御する。
・HTML5に対応していないブラウザにも対応が必要な場合は、location.hash を使用して制御する。
※History API が使用できる場合は、そちらを使用するのもあり。
History API を使用する場合でも、location.hash を使用する場合でも、基本的な考え方は以下の通り。
(1)AページからBページに遷移
(2)Bページ読み込み時
◆最新の履歴に自身のページ(Bページ)を追加する
(3)戻る押下時
・上記で最新履歴に自身(Bページ)を追加しているのでAページには戻らない。(Bページのまま)
◆最新の履歴に自身のページを追加する
※上記の2カ所(◆)で、自身のページを履歴に追加する。
<script> $(function(){ // 自身のページを履歴に追加 history.pushState(null, null, null); // ページ戻り時にも自身のページを履歴に追加 $(window).on("popstate", function(){ history.pushState(null, null, null); }); }); </script>
<script type="text/javascript"> $(function(){ // 自身のページを履歴に追加 location.hash = "#prepage"; // ページ戻り時にも自身のページを履歴に追加 $(window).on("hashchange", function(){ location.hash = "#prepage2"; }); }); </script>