ブラウザの戻る禁止の変更点 - 闘うITエンジニアの覚え書き

追加された行はこの色です。
削除された行はこの色です。
ブラウザの戻る禁止へ行く。

[[HTML/JavaScript集]] > [[JavaScriptメモ]] > ブラウザの戻る禁止
* ブラウザの戻る禁止 [#d22e0767]
#setlinebreak(on)

JavaScript だけでブザウザの戻るを禁止する方法。

** 環境の違いによる対応 [#bb96b92c]
・HTML5対応のブラウザであれば、History API を使用して制御する。
・HTML5に対応していないブラウザにも対応が必要な場合は、location.hash を使用して制御する。
　※History API が使用できる場合は、そちらを使用するのもあり。

** 対応方法 [#a0e21508]
History API を使用する場合でも、location.hash を使用する場合でも、基本的な考え方は以下の通り。

（１）AページからBページに遷移

（２）Bページ読み込み時
　　　◆最新の履歴に自身のページ(Bページ)を追加する

（３）戻る押下時
　　　・上記で最新履歴に自身(Bページ)を追加しているのでAページには戻らない。(Bページのまま)
　　　◆最新の履歴に自身のページを追加する


※上記の２カ所（◆）で、自身のページを履歴に追加する。


** 対応内容 [#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/

ブラウザの戻る禁止 の変更点 - 闘うITエンジニアの覚え書き

ブラウザの戻る禁止の変更点 - 闘うITエンジニアの覚え書き