異なるブラウザ間でブラウザの戻るボタンの押下を確実に検出するにはどうすればよいですか?

ブラウザ全体でのブラウザの「戻る」ボタンのイベント検出

ブラウザの「戻る」ボタンの動作の検出には、非同期の性質があるため課題が生じます。 window.onhashchange を利用するなど、いくつかの方法は存在しますが、ハッシュ変更をトリガーするページ内要素と実際の戻るボタンの押下を区別できません。

ページ内の戻るボタンの使用を強制する

ハッシュ ナビゲーションに依存するシングルページ アプリケーションでは、戻るボタンの機能を規制することが重要です。ハッシュを変更するページ内の戻るボタンを使用することで、ナビゲーションの制御を維持できます。

ブラウザの戻るボタンの押下を検出する

ブラウザの戻るボタン イベントを正確に検出するにはでは、マウスホバーを使用したクロスプラットフォームのアプローチを検討し、ドキュメント上でイベントを残します。

document.onmouseover = function() {
    // User's cursor is within the document area
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    // User's cursor has exited the document area
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        // Navigation triggered by in-page action
    } else {
        // Browser back button was pressed
    }
}

このメソッドは、カーソルがドキュメント領域内にあるかどうかを示すブール フラグ (window.innerDocClick)。フラグが false のときにハッシュが変更された場合は、ブラウザーの「戻る」ボタンを押すことを提案します。

Backspace キーが Back イベントをトリガーしないようにします

Backspace キーがバックスペース キーをアクティブにしないようにするには、 [戻る] ボタンを使用するには、次の jQuery コードを使用します:

$(function(){
    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 サイトの他の関連記事を参照してください。