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