So erkennen Sie das Ereignis der Browser-Zurück-Schaltfläche – Browserübergreifend

Lesezeit: 9 Minuten

Wie erkennt man eindeutig, ob der User im Browser den Zurück-Button gedrückt hat oder nicht?

Wie erzwingen Sie die Verwendung einer In-Page-Zurück-Schaltfläche in einer Single-Page-Webanwendung mit a #URL System?

Warum um alles in der Welt lösen Browser-Zurück-Buttons keine eigenen Ereignisse aus!?

So erkennen Sie das Ereignis der Browser Zuruck Schaltflache Browserubergreifend
Xaros

(Hinweis: Gemäß Sharkys Feedback habe ich Code zum Erkennen von Rückschritten eingefügt.)

Ich habe diese Fragen also häufig auf SO gesehen und bin kürzlich selbst auf das Problem gestoßen, die Funktionalität der Zurück-Schaltfläche zu steuern. Nach einigen Tagen der Suche nach der besten Lösung für meine Anwendung (Single-Page mit Hash-Navigation) habe ich ein einfaches, browserübergreifendes, bibliotheksloses System zur Erkennung der Zurück-Schaltfläche entwickelt.

Die meisten Leute empfehlen die Verwendung von:

window.onhashchange = function() {
 //blah blah blah
}

Diese Funktion wird jedoch auch aufgerufen, wenn ein Benutzer ein In-Page-Element verwendet, das den Standort-Hash ändert. Nicht die beste Benutzererfahrung, wenn Ihr Benutzer klickt und die Seite vor- oder zurückgeht.

Um Ihnen einen allgemeinen Überblick über mein System zu geben, fülle ich ein Array mit früheren Hashes, während sich mein Benutzer durch die Schnittstelle bewegt. Es sieht in etwa so aus:

function updateHistory(curr) {
    window.location.lasthash.push(window.location.hash);
    window.location.hash = curr;
}

Ziemlich einfach. Ich tue dies, um die browserübergreifende Unterstützung sowie die Unterstützung älterer Browser sicherzustellen. Übergeben Sie einfach den neuen Hash an die Funktion, und sie speichert ihn für Sie und ändert dann den Hash (der dann in den Verlauf des Browsers eingefügt wird).

Ich verwende auch eine In-Page-Zurück-Schaltfläche, die den Benutzer mithilfe von zwischen den Seiten bewegt lasthash Reihe. Es sieht aus wie das:

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

Dies verschiebt den Benutzer also zurück zum letzten Hash und entfernt diesen letzten Hash aus dem Array (ich habe im Moment keine Vorwärts-Schaltfläche).

Damit. Wie erkenne ich, ob ein Benutzer meine In-Page-Zurück-Schaltfläche oder die Browser-Schaltfläche verwendet hat oder nicht?

Zuerst habe ich geschaut window.onbeforeunload, aber ohne Erfolg – das wird nur aufgerufen, wenn der Benutzer Seiten wechseln will. Bei einer Single-Page-Anwendung mit Hash-Navigation passiert das nicht.

Also, nach weiterem Graben sah ich Empfehlungen für den Versuch, eine Flag-Variable zu setzen. Das Problem dabei ist in meinem Fall, dass ich versuchen würde, es zu setzen, aber da alles asynchron ist, würde es nicht immer rechtzeitig für die if-Anweisung in der Hash-Änderung gesetzt werden. .onMouseDown wurde nicht immer in Click aufgerufen, und das Hinzufügen zu einem Onclick würde es nie schnell genug auslösen.

Dies war, als ich begann, den Unterschied zwischen zu betrachten documentund window. Meine endgültige Lösung war, das Flag mit zu setzen document.onmouseoverund deaktivieren Sie es mit document.onmouseleave.

Was passiert ist, dass, während sich die Maus des Benutzers im Dokumentbereich befindet (sprich: die gerenderte Seite, aber ohne den Browser-Frame), mein boolescher Wert auf gesetzt ist true. Sobald die Maus den Dokumentbereich verlässt, springt der boolesche Wert auf false.

Auf diese Weise kann ich meine ändern window.onhashchange zu:

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

Sie notieren den Scheck für #undefined. Dies liegt daran, dass es zurückkehrt, wenn in meinem Array kein Verlauf verfügbar ist undefined. Ich benutze dies, um den Benutzer zu fragen, ob er mit a gehen möchte window.onbeforeunload Veranstaltung.

Kurz gesagt, und für Leute, die nicht unbedingt eine In-Page-Zurück-Schaltfläche oder ein Array zum Speichern des Verlaufs verwenden:

document.onmouseover = function() {
    //User's mouse is inside the page.
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    //User's mouse has left the page.
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        //Your own in-page mechanism triggered the hash change
    } else {
        //Browser back button was clicked
    }
}

Und da haben Sie es. eine einfache, dreiteilige Möglichkeit, die Verwendung der Zurück-Schaltfläche im Vergleich zu In-Page-Elementen in Bezug auf die Hash-Navigation zu erkennen.

BEARBEITEN:

Um sicherzustellen, dass der Benutzer nicht die Rücktaste verwendet, um das Back-Ereignis auszulösen, können Sie auch Folgendes einfügen (Danke an @thetoolman für diese Frage):

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

  • +1 nette Idee, aber ich denke, dies wird fehlschlagen, wenn der Benutzer eine beliebige Tastenkombination für “Zurück” (Rücktaste bei Firefox) verwendet, während sich seine Maus im Browserfenster befindet

    – Haifisch

    12. September 2014 um 10:56 Uhr


  • Wird gemacht – ich bin sowieso im Büro 🙂 (EDIT: Fertig)

    – Xaros

    12. September 2014 um 11:02 Uhr


  • Was ist mit Mobilgeräten (z. B. iPad)

    – Basarat

    27. Januar 2015 um 3:40 Uhr

  • Was ist mit Swipe-Ereignissen vom Trackpad in MAC? Könnte man das auch einfangen?

    – Sriganesh Navaneethakrishnan

    16. Juli 2015 um 22:53 Uhr

  • Wie kann ich Vorwärts- und Rückwärts-Buttons unterscheiden?

    – Mr Perfekt

    6. Dezember 2016 um 5:52 Uhr

So erkennen Sie das Ereignis der Browser Zuruck Schaltflache Browserubergreifend
kenorb

Du kannst es versuchen popstate Eventhandler, zB:

window.addEventListener('popstate', function(event) {
    // The popstate event is fired each time when the current history entry changes.

    var r = confirm("You pressed a Back button! Are you sure?!");

    if (r == true) {
        // Call Back button programmatically as per user confirmation.
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer // Note: IE11 is not supporting this.
    } else {
        // Stay on the current page.
        history.pushState(null, null, window.location.pathname);
    }

    history.pushState(null, null, window.location.pathname);

}, false);

Hinweis: Um die besten Ergebnisse zu erzielen, sollten Sie diesen Code nur auf bestimmten Seiten laden, auf denen Sie die Logik implementieren möchten, um andere unerwartete Probleme zu vermeiden.

Das Popstate-Ereignis wird jedes Mal ausgelöst, wenn sich der aktuelle Verlaufseintrag ändert (der Benutzer navigiert zu einem neuen Status). Dies geschieht, wenn der Benutzer auf die Schaltflächen „Zurück/Weiter“ des Browsers klickt oder wann history.back(), history.forward(), history.go() Methoden werden programmatisch aufgerufen.

Die event.state Diese Eigenschaft des Ereignisses ist gleich dem Verlaufszustandsobjekt.

Wickeln Sie es für die jQuery-Syntax um (um sogar einen Listener hinzuzufügen, nachdem das Dokument fertig ist):

(function($) {
  // Above code here.
})(jQuery);

Siehe auch: window.onpopstate beim Laden der Seite


Siehe auch die Beispiele auf Single-Page-Apps und HTML5-PushState Seite:

<script>
// jQuery
$(window).on('popstate', function (e) {
    var state = e.originalEvent.state;
    if (state !== null) {
        //load content with ajax
    }
});

// Vanilla javascript
window.addEventListener('popstate', function (e) {
    var state = e.state;
    if (state !== null) {
        //load content with ajax
    }
});
</script>

Dies sollte mit Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+ und ähnlichen kompatibel sein.

  • Kenorb, Sie haben Recht, dass Popstate funktioniert, um die Änderung zu erfassen, aber es unterscheidet nicht zwischen dem programmgesteuerten Aufrufen des Ereignisses und dem Klicken des Benutzers auf die Schaltflächen des Browsers.

    – Xaros

    9. Mai 2016 um 12:08 Uhr

  • Toller Beitrag weiter Single-Page-Apps und HTML5-PushState. Perfekt für moderne „One-Page-Layouts“ oder „Single-Page-Apps“. Danke für den Link und deine Antwort!

    – Lowtech-Sonne

    28. Mai 2016 um 1:04 Uhr


  • e.state scheinen in modernen Browsern immer undefiniert zu sein

    – a11r

    15. November 2017 um 16:10 Uhr

  • Ich schlage vor, dass Sie Ihren Code in ein Snippet einfügen, damit Sie ihn direkt hier ausführen können.

    – VierZimt0

    15. Juni 2018 um 18:42 Uhr

  • Das Popstate-Ereignis wird nur durch Ausführen einer Browseraktion ausgelöst, z. B. Klicken auf die Zurück-Schaltfläche (oder Aufrufen von history.back() in JavaScript), wenn zwischen zwei Verlaufseinträgen für dasselbe Dokument navigiert wird. ( developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/… )

    – Vorzug

    31. August 2021 um 20:24 Uhr


So erkennen Sie das Ereignis der Browser Zuruck Schaltflache Browserubergreifend
Itzmeygu

Ich hatte eine ganze Weile mit dieser Anforderung zu kämpfen und einige der oben genannten Lösungen genommen, um sie zu implementieren. Ich bin jedoch über eine Beobachtung gestolpert und sie scheint in Chrome-, Firefox- und Safari-Browsern + Android und iPhone zu funktionieren

Beim Laden der Seite:

window.history.pushState({page: 1}, "", "");

window.onpopstate = function(event) {

  // "event" object seems to contain value only when the back button is clicked
  // and if the pop state event fires due to clicks on a button
  // or a link it comes up as "undefined" 

  if(event){
    // Code to handle back button or prevent from navigation
  }
  else{
    // Continue user action through link or button
  }
}

Lassen Sie mich wissen, ob das hilft. Wenn etwas fehlt, werde ich gerne verstehen.

  • Nicht wahr. event hat Wert sogar für die Vorwärts-Taste

    – Daniel Birowsky Popeski

    13. Juni 2018 um 17:06 Uhr

1646640315 685 So erkennen Sie das Ereignis der Browser Zuruck Schaltflache Browserubergreifend
Hasan Badshah

In Javascript Navigationstyp 2 bedeutet, dass auf die Zurück- oder Vorwärts-Schaltfläche des Browsers geklickt wurde und der Browser tatsächlich Inhalte aus dem Cache nimmt.

if(performance.navigation.type == 2)
{
    //Do your code here
}

if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
  alert('hello world');
}

Dies ist die einzige Lösung, die für mich funktioniert hat (es ist keine Onepage-Website). Es funktioniert mit Chrome, Firefox und Safari.

  • window.performance.navigation ist veraltet. Hier sind die Dokumente developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

    – Hallo

    18. Juni 2019 um 16:12 Uhr

  • Dies funktionierte für mich auf meiner .cshtml-Seite. Funktionierte erfolgreich auf Chrome und IE. Danke

    – Justjyde

    25. April 2020 um 5:34 Uhr

  • @llaaalu Dies funktioniert nach der Verwerfung, ich bin mir nicht sicher über die Cross-Browser-Kompatibilität: if (String(window.performance.getEntriesByType(“navigation”)[0].type) === “back_forward”) { // Code hier eingeben }

    – Mladen Adamović

    25. Oktober 2020 um 11:37 Uhr


1646640316 485 So erkennen Sie das Ereignis der Browser Zuruck Schaltflache Browserubergreifend
Hallo

Die richtige Antwort ist bereits vorhanden, um die Frage zu beantworten. Ich möchte die neue JavaScript-API erwähnen PerformanceNavigationTiminges ersetzt veraltet leistung.navigation.

Der folgende Code meldet sich in der Konsole „back_forward“ an, wenn der Benutzer mit der Schaltfläche „Zurück“ oder „Vorwärts“ auf Ihrer Seite gelandet ist. Werfen Sie einen Blick auf die Kompatibilitätstabelle, bevor Sie sie in Ihrem Projekt verwenden.

var perfEntries = performance.getEntriesByType("navigation");
for (var i = 0; i < perfEntries.length; i++) {
    console.log(perfEntries[i].type);
}

  • window.performance.navigation ist veraltet. Hier sind die Dokumente developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

    – Hallo

    18. Juni 2019 um 16:12 Uhr

  • Dies funktionierte für mich auf meiner .cshtml-Seite. Funktionierte erfolgreich auf Chrome und IE. Danke

    – Justjyde

    25. April 2020 um 5:34 Uhr

  • @llaaalu Dies funktioniert nach der Verwerfung, ich bin mir nicht sicher über die Cross-Browser-Kompatibilität: if (String(window.performance.getEntriesByType(“navigation”)[0].type) === “back_forward”) { // Code hier eingeben }

    – Mladen Adamović

    25. Oktober 2020 um 11:37 Uhr


1646640317 755 So erkennen Sie das Ereignis der Browser Zuruck Schaltflache Browserubergreifend
rohan parab

Dies wird definitiv funktionieren (Zum Erkennen des Zurück-Knopfklicks)

$(window).on('popstate', function(event) {
 alert("pop");
});

964220cookie-checkSo erkennen Sie das Ereignis der Browser-Zurück-Schaltfläche – Browserübergreifend

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy