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カ所(◆)で、自身のページを履歴に追加する。

対応内容

HTML5 対応のブラウザのみサポートする場合

<script>
$(function(){

    // 自身のページを履歴に追加
    history.pushState(null, null, null);

    // ページ戻り時にも自身のページを履歴に追加
    $(window).on("popstate", function(){
        history.pushState(null, null, null);
    });
});
</script>

HTML5 対応でないブラウザもサポートする場合

<script type="text/javascript">
$(function(){

    // 自身のページを履歴に追加
    location.hash = "#prepage";

    // ページ戻り時にも自身のページを履歴に追加
    $(window).on("hashchange", function(){
        location.hash = "#prepage2";
    });
});
</script>

サンプル ・・・ http://www.magata.net/test/noback/


トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-03-21 (月) 02:37:21 (1001d)