- 追加された行はこの色です。
- 削除された行はこの色です。
[[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(){
// 自身のページを履歴に追加
location.hash = "#prepage";
// ページ戻り時にも自身のページを履歴に追加
$(window).on("hashchange", function(){
location.hash = "#prepage2";
});
});
</script>
}}
** デモ [#s9f49e3f]
http://www.magata.net/test/noback/