Wie erkennt man den Klick des Benutzers auf die Zurück-Schaltfläche in Browsern, ohne dass es zu Störungen beim Neuladen des Browsers kommt?

Klicken des Benutzers auf die Zurück-Schaltfläche in Browsern erkennen

Beim Versuch, Klicks auf die Zurück-Schaltfläche zu erkennen, verlassen sich Entwickler häufig auf den Ereignis-Listener window.onbeforeunload. Dieses Ereignis wird jedoch nicht nur bei Klicks auf die Zurück-Schaltfläche ausgelöst, sondern auch beim Neuladen des Browsers, was irreführend sein kann.

Erkennen von Klicks auf die Zurück-Schaltfläche ohne Beeinträchtigung des Browser-Neuladens

Umzugehen Klicken Sie auf die Zurück-Schaltfläche ohne Fehlalarme. Erwägen Sie die Verwendung eines maßgeschneiderten Ansatzes:

1. Verlaufsänderung:

   • Überprüfen Sie beim Laden der Seite, ob die Die API „history.pushState“ ist verfügbar.
   • Falls unterstützt, können Sie mithilfe von „history.pushState“ einen zufälligen Status in den Verlauf übertragen.
   • Definieren Sie einen Onpopstate-Ereignis-Listener, um Übergänge von Schaltflächen „Vorwärts“ und „Vorwärts“ zu verarbeiten.

2. Hash-basierter Ansatz:

   • Wenn History.pushState nicht unterstützt wird, verwenden Sie das Hash-Änderungsereignis (window.onhashchange). .
   • Legen Sie einen anfänglichen Hash-Wert fest und prüfen Sie bei Hash-Änderungen, ob ein nicht zufälliger Hash-Wert vorliegt.
   • Verwenden Sie ein Flag, um sicherzustellen, dass nur vom Benutzer initiierte Hash-Änderungen die Logik der Zurück-Schaltfläche auslösen. Das Neuladen des Browsers wird ignoriert.

Implementierung

<code class="javascript">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back button click here
        };
    }
    else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Handle back button click here
            }
            else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

Kompatibilität

Dieser Ansatz Es wurde berichtet, dass es in Chrome und Firefox effektiv funktioniert.

Das obige ist der detaillierte Inhalt vonWie erkennt man den Klick des Benutzers auf die Zurück-Schaltfläche in Browsern, ohne dass es zu Störungen beim Neuladen des Browsers kommt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!