Wie erkennt man Klicks auf die Zurück-Schaltfläche in Browsern genau?

Erkennen von Zurück-Button-Klicks im Browser mit erhöhter Genauigkeit

Einführung:

Das Identifizieren von Zurück-Button-Klicks ist für die Browserimplementierung unerlässlich Verfolgung des Navigationsverlaufs. Obwohl es verschiedene Ansätze gibt, ist es wichtig, zwischen echten Klicks auf die Zurück-Schaltfläche und anderen Browseraktionen zu unterscheiden, die ähnliche Ereignisse auslösen.

Hintergrund:

Ein gängiger Ansatz ist die Verwendung des Fensters .onbeforeunload-Ereignis-Listener, der ausgelöst wird, wenn ein Benutzer versucht, eine Seite zu schließen oder zu verlassen. Dieses Ereignis wird jedoch auch bei Aktionen wie dem Drücken von F5 oder dem Neuladen der Seite ausgelöst, was zu Fehlalarmen führt.

Lösung:

Um dieses Problem zu beheben, bedarf es einer ausgefeilteren Vorgehensweise Lösung ist erforderlich. Diese Lösung nutzt die Methoden „history.pushState“ und „window.onpopstate“, die eine genauere Kontrolle über den Navigationsverlauf ermöglichen.

Implementierung:

Der folgende Codeausschnitt veranschaulicht die Implementierung:

<code class="js">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back (or forward) buttons here
            // Will NOT handle refresh, use onbeforeunload for this.
        };
    } else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Detect and redirect change here
                // Works in older Firefox and Internet Explorer 9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            } else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

Erklärung:

Dieser Code verwendet History.pushState, um den Browserverlauf zu aktualisieren, ohne die Seite neu zu laden. Es bindet dann an das window.onpopstate-Ereignis, das ausgelöst wird, wenn ein Benutzer auf die Zurück- oder Vorwärts-Schaltfläche klickt.

In Browsern, die History.pushState unterstützen, ermöglicht dieser Ansatz eine präzise Erkennung von Zurück-Schaltflächenklicks, mit Ausnahme von Neuladeereignissen. Für ältere Browser verwendet der Code eine Fallback-Methode, die auf Hash-Änderungen basiert, was zu einer leichten Einschränkung bei der Handhabung von Nummernzeichen-Trennzeichen führt.

Schlussfolgerung:

Dieser verbesserte Ansatz gewährleistet genaue Erkennung von Zurück-Button-Klicks in Browsern, wodurch die Einschränkungen der alleinigen Verwendung von window.onbeforeunload entfallen. Es bietet Entwicklern eine zuverlässige Lösung zur Verfolgung des Navigationsverlaufs und zur Verbesserung der Benutzererfahrung.

Das obige ist der detaillierte Inhalt vonWie erkennt man Klicks auf die Zurück-Schaltfläche in Browsern genau?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!