ブラウザの「戻る」ボタンのクリックを確実に検出し、ページ内ナビゲーションを強制するにはどうすればよいですか?

ブラウザの戻るボタンのクリックを検出し、ページ内ナビゲーションを強制するためのクロスブラウザ技術

ブラウザの戻るボタンのクリックを検出し、その使用を強制するハッシュタグ (#) システムを使用したページ内ナビゲーション システムの

ブラウザの戻るボタンの検出

window.onhashchange を単独で使用する従来のアプローチは、ページ内要素のハッシュが変更されたときにもトリガーされるため、信頼性がありません。これに対処するために、document.onmouseover、document.onmouseleave、およびブール フラグ (window.innerDocClick) を利用する新しい手法が採用されています。ユーザーのマウスがドキュメント領域に入ると、window.innerDocClick は true に設定され、マウスがドキュメント領域から出ると、false に設定されます。これにより、次の window.onhashchange ハンドラが可能になります:

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

ページ内戻るボタンの強制

ページ内戻るボタンのみを使用して戻るナビゲーションを制御するには、履歴配列 (window.location.lastthash) は、ユーザーがインターフェイスを進むにつれて以前のハッシュを保存するために利用されます。ページ内の戻るボタン機能 (goBack) は、この配列を使用して前のページに移動します。

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    window.location.lasthash.pop();
}

Backspace キーを抑制

ユーザーが使用できないようにするためBackspace キーを押して「戻る」ボタンをトリガーするには、次のコード スニペットを追加できます:

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});

以上がブラウザの「戻る」ボタンのクリックを確実に検出し、ページ内ナビゲーションを強制するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。