HTML/JavaScript集 > JavaScriptメモ > ブラウザの戻る禁止 ブラウザの戻る禁止 †JavaScript だけでブザウザの戻るを禁止する方法。 環境の違いによる対応 †・HTML5対応のブラウザであれば、History API を使用して制御する。 対応方法 †History API を使用する場合でも、location.hash を使用する場合でも、基本的な考え方は以下の通り。 (1)AページからBページに遷移 (2)Bページ読み込み時 (3)戻る押下時 ※上記の2カ所(◆)で、自身のページを履歴に追加する。 対応内容 †HTML5 対応のブラウザのみサポートする場合 †<script> $(function(){ // 自身のページを履歴に追加 history.pushState(null, null, null); // ページ戻り時にも自身のページを履歴に追加 $(window).on("popstate", function(){ history.pushState(null, null, null); }); }); </script> HTML5 対応でないブラウザもサポートする場合 †<script type="text/javascript"> $(function(){ var NOBACK_HASH = "#noback_hash"; $(window).on("load", function(){ // ページ読み込み後に自身のページを履歴に追加 // (読み込み中 または 読み込み直後に変更したURIは history.back 時に無視されるケースがある為、初回は少し遅延させる) setTimeout(function(){ location.hash = NOBACK_HASH; }, 10); // ページ戻り時にも自身のページを履歴に追加 $(window).on("hashchange", function(){ if (location.hash != NOBACK_HASH){ location.hash = NOBACK_HASH; } }); }); }); </script> デモ † |