Wie kann ich Browser-Zurück-Button-Klicks zuverlässig erkennen und die In-Page-Navigation erzwingen?

Browserübergreifende Technik zum Erkennen von Browser-Zurück-Button-Klicks und Erzwingen der In-Page-Navigation

Erkennen des Browser-Zurück-Button-Klicks und Erzwingen der Verwendung eines In-Page-Navigationssystems mithilfe eines Hashtag-Systems (#) kann sein herausfordernd.

Erkennung der Browser-Zurück-Schaltfläche

Der herkömmliche Ansatz, window.onhashchange allein zu verwenden, ist nicht zuverlässig, da er auch ausgelöst wird, wenn In-Page-Elemente den Hash ändern. Um dies zu beheben, wird eine neuartige Technik eingesetzt, die document.onmouseover, document.onmouseleave und ein boolesches Flag (window.innerDocClick) nutzt. Wenn die Maus des Benutzers den Dokumentbereich betritt, wird window.innerDocClick auf true gesetzt, und wenn er den Dokumentbereich verlässt, wird es auf false gesetzt. Dies ermöglicht den folgenden window.onhashchange-Handler:

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();
        }
    }
}

Erzwingung der In-Page-Zurück-Schaltfläche

Um die Rücknavigation ausschließlich über die In-Page-Zurück-Schaltfläche zu steuern, Ein Verlaufsarray (window.location.lasthash) wird verwendet, um frühere Hashes zu speichern, während der Benutzer die Schnittstelle durchläuft. Eine In-Page-Zurück-Schaltflächenfunktion (goBack) verwendet dieses Array, um zur vorherigen Seite zu navigieren.

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

Rücktaste unterdrücken

Um zu verhindern, dass der Benutzer sie verwendet Wenn Sie die Rücktaste drücken, um die Zurück-Schaltfläche auszulösen, kann das folgende Code-Snippet hinzugefügt werden:

$(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();
            }
        }
    });
});

Das obige ist der detaillierte Inhalt vonWie kann ich Browser-Zurück-Button-Klicks zuverlässig erkennen und die In-Page-Navigation erzwingen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!