web-dev-qa-db-de.com

JavaScript- oder jQuery-Browser-Schaltfläche "Zurück", klicken Sie auf "Detektor"

Könnte jemand bitte Erfahrungen/Code teilen, wie wir den Klick auf die Schaltfläche "Zurück" des Browsers erkennen können (für jeden Browsertyp)?

Wir müssen alle Browser bedienen, die HTML5 nicht unterstützen

40
Nil Pun

Das 'popstate'-Ereignis funktioniert nur, wenn Sie zuvor etwas pushen. Also musst du so etwas machen:

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    window.history.pushState('forward', null, './#forward');

    $(window).on('popstate', function() {
      alert('Back button was pressed.');
    });

  }
});

Aus Gründen der Abwärtskompatibilität des Browsers empfehle ich: history.js

51

es gibt viele Möglichkeiten, wie Sie feststellen können, ob der Benutzer auf die Schaltfläche Zurück geklickt hat. Aber alles hängt davon ab, was Sie brauchen. Versuchen Sie, die unten stehenden Links zu durchsuchen. Sie sollten Ihnen helfen.

Ermitteln, ob der Benutzer auf der aktuellen Seite die Schaltfläche "Zurück" gedrückt hat:

Ermitteln Sie, ob die aktuelle Seite besucht wird, nachdem Sie auf der vorherigen Seite ("Vorwärts") auf die Schaltfläche "Zurück" geklickt haben:

10
Vlad Mysla

Ich fand, dass dies sowohl für Browser als auch für Handys gut funktioniert back_button_override.js .

(Timer für Safari 5.0 hinzugefügt)

// managage back button click (and backspace)
var count = 0; // needed for safari
window.onload = function () { 
    if (typeof history.pushState === "function") { 
        history.pushState("back", null, null);          
        window.onpopstate = function () { 
            history.pushState('back', null, null);              
            if(count == 1){window.location = 'your url';}
         }; 
     }
 }  
setTimeout(function(){count = 1;},200);
6
user2992220

In Javascript bedeutet Navigationstyp 2, dass der Browser auf die Vor- oder Zurück-Schaltfläche geklickt hat und der Browser tatsächlich Inhalte aus dem Cache entnimmt.

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

Sie können dieses tolle Plugin verwenden

https://github.com/ianrogren/jquery-backDetect

Alles was Sie tun müssen, ist diesen Code zu schreiben

  $(window).load(function(){
    $('body').backDetect(function(){
      // Callback function
      alert("Look forward to the future, not the past!");
    });
  });

Beste

1
Hussam Kurd

Deaktivieren Sie die URL-Taste, indem Sie die folgenden Funktionen ausführen

window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle the 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 FF and IE9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            }
            else {
                ignoreHashChange = false;
            }
        };
    }
};
0
Sakthi Karthik

Im Falle von HTML5 ist dies der Trick

window.onpopstate = function() {
   alert("clicked back button");
}; history.pushState({}, '');
0
Ashik Jyothi

Es ist in der HTML5-Verlaufs-API verfügbar. Die Veranstaltung heißt 'popstate'

0
Eric