So erkennen Sie das Ereignis "Browser Back Button" - Cross Browser

Wie erkennen Sie definitiv, ob der Benutzer die Zurück-Taste im Browser gedrückt hat oder nicht?

Wie erzwingen Sie die Verwendung einer In-Page-Zurück-Schaltfläche in einer einseitigen Webanwendung mithilfe eines #URLSystems?

Warum um alles in der Welt lösen Browser-Zurück-Schaltflächen keine eigenen Ereignisse aus?

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

Daher habe ich diese Fragen in SO häufig gesehen und bin kürzlich auf das Problem gestoßen, die Funktionalität von Zurück-Schaltflächen selbst 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:

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 vorwärts oder rückwärts geht.

Um Ihnen einen allgemeinen Überblick über mein System zu geben, fülle ich ein Array mit vorherigen Hashes, während sich mein Benutzer durch die Benutzeroberfläche bewegt. Es sieht ungefähr so ​​aus:

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

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

Ich verwende auch eine Schaltfläche zum Zurückseiten innerhalb der Seite, mit der der Benutzer mithilfe des lasthashArrays zwischen den Seiten verschoben wird. 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();
}

Dadurch wird der Benutzer zurück zum letzten Hash verschoben und dieser letzte Hash aus dem Array entfernt (ich habe derzeit keine Schaltfläche zum Weiterleiten).

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

Zuerst habe ich mir das angeschaut window.onbeforeunload, aber ohne Erfolg - das wird nur aufgerufen, wenn der Benutzer die Seiten wechseln will. Dies ist in einer Einzelseitenanwendung mit Hash-Navigation nicht der Fall.

Nach einigem 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 festzulegen, aber da alles asynchron ist, würde es nicht immer rechtzeitig für die if-Anweisung in der Hash-Änderung festgelegt. .onMouseDownwurde nicht immer mit einem Klick aufgerufen, und das Hinzufügen zu einem Onclick würde es niemals schnell genug auslösen.

Zu diesem Zeitpunkt begann ich, den Unterschied zwischen documentund zu untersuchen window. Meine endgültige Lösung bestand darin, das Flag mit zu setzen document.onmouseoverund es mit zu deaktivieren document.onmouseleave.

Während sich die Maus des Benutzers im Dokumentbereich befindet (lesen: die gerenderte Seite, jedoch ohne den Browser-Frame), wird mein Boolescher Wert auf gesetzt true. Sobald die Maus den Dokumentbereich verlässt, wechselt der Boolesche Wert zu false.

Auf diese Weise kann ich meine ändern window.onhashchangezu:

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 werden den Scheck für notieren #undefined. Dies liegt daran, dass wenn in meinem Array kein Verlauf verfügbar ist, dieser zurückgegeben wird undefined. Ich benutze dies, um den Benutzer zu fragen, ob er mit einem window.onbeforeunloadEreignis gehen möchte .

Kurz gesagt und für Personen, 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 hast du es. Eine einfache dreiteilige Methode zur Erkennung der Verwendung von Zurück-Schaltflächen im Vergleich zu In-Page-Elementen in Bezug auf die Hash-Navigation.

BEARBEITEN:

Um sicherzustellen, dass der Benutzer keine Rücktaste verwendet, um das Rückereignis auszulösen, können Sie auch Folgendes einschließen (Dank 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();
            }
        }
    });
});

Sie können den popstateEvent-Handler ausprobieren , z.

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 (Benutzer navigiert zu einem neuen Status). Das passiert , wenn der Benutzer klickt auf dem Browser Back / Forward - Tasten oder wenn history.back(), history.forward(), history.go()werden Methoden programmatisch genannt.

Die event.stateis-Eigenschaft des Ereignisses entspricht dem Verlaufsstatusobjekt.

Umschließen Sie die jQuery-Syntax (um 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 für Single-Page-Apps und die 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 ähnlichem kompatibel sein.

Ich hatte eine ganze Weile mit dieser Anforderung zu kämpfen und einige der oben genannten Lösungen gewählt, um sie umzusetzen. Ich bin jedoch auf eine Beobachtung gestoßen, die anscheinend in allen Browsern von Chrome, Firefox und Safari + Android und iPhone funktioniert

Laden auf 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.

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

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

Dies wird definitiv funktionieren (zum Erkennen des Zurück-Button-Klicks)

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

Sieh dir das an:

history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

es funktioniert gut...

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 einseitige Website). Es funktioniert mit Chrome, Firefox und Safari.

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

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. Sehen Sie sich die Kompatibilitätstabelle an, 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);
}

Browser: https://jsfiddle.net/Limitlessisa/axt1Lqoz/

Für die mobile Steuerung: https://jsfiddle.net/Limitlessisa/axt1Lqoz/show/

$(document).ready(function() {
  $('body').on('click touch', '#share', function(e) {
    $('.share').fadeIn();
  });
});

// geri butonunu yakalama
window.onhashchange = function(e) {
  var oldURL = e.oldURL.split('#')[1];
  var newURL = e.newURL.split('#')[1];

  if (oldURL == 'share') {
    $('.share').fadeOut();
    e.preventDefault();
    return false;
  }
  //console.log('old:'+oldURL+' new:'+newURL);
}

.share{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); color:white; padding:20px;

<!DOCTYPE html>
<html>

<head>
    <title>Back Button Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body style="text-align:center; padding:0;">
    <a href="#share" id="share">Share</a>
    <div class="share" style="">
        <h1>Test Page</h1>
        <p> Back button press please for control.</p>
    </div>
</body>

</html>

Hier ist meine Meinung dazu. Die Annahme ist, wenn sich die URL ändert, aber kein Klick innerhalb des documentErkannten vorhanden ist, handelt es sich um einen Browser zurück (ja oder vorwärts). Ein Benutzerklick wird nach 2 Sekunden zurückgesetzt, damit dies auf Seiten funktioniert, die Inhalte über Ajax laden:

(function(window, $) {
  var anyClick, consoleLog, debug, delay;
  delay = function(sec, func) {
    return setTimeout(func, sec * 1000);
  };
  debug = true;
  anyClick = false;
  consoleLog = function(type, message) {
    if (debug) {
      return console[type](message);
    }
  };
  $(window.document).click(function() {
    anyClick = true;
    consoleLog("info", "clicked");
    return delay(2, function() {
      consoleLog("info", "reset click state");
      return anyClick = false;
    });
  });
  return window.addEventListener("popstate", function(e) {
    if (anyClick !== true) {
      consoleLog("info", "Back clicked");
      return window.dataLayer.push({
        event: 'analyticsEvent',
        eventCategory: 'test',
        eventAction: 'test'
      });
    }
  });
})(window, jQuery);

Ich konnte einige der Antworten in diesem Thread und andere verwenden, um es in IE und Chrome / Edge zum Laufen zu bringen. history.pushState wurde für mich in IE11 nicht unterstützt.

if (history.pushState) {
    //Chrome and modern browsers
    history.pushState(null, document.title, location.href);
    window.addEventListener('popstate', function (event) {
        history.pushState(null, document.title, location.href);
    });
}
else {
    //IE
    history.forward();
}

Eine vollwertige Komponente kann nur implementiert werden, wenn Sie die API neu definieren (die Methoden des Objekts 'Verlauf' ändern). Ich werde die gerade geschriebene Klasse freigeben. Getestet auf Chrome und Mozilla Unterstützung nur HTML5 und ECMAScript5-6

class HistoryNavigation {
    static init()
    {
        if(HistoryNavigation.is_init===true){
            return;
        }
        HistoryNavigation.is_init=true;

        let history_stack=[];
        let n=0;
        let  current_state={timestamp:Date.now()+n};
        n++;
        let init_HNState;
        if(history.state!==null){
            current_state=history.state.HNState;
            history_stack=history.state.HNState.history_stack;
            init_HNState=history.state.HNState;
        } else {
            init_HNState={timestamp:current_state.timestamp,history_stack};
        }
        let listenerPushState=function(params){
            params=Object.assign({state:null},params);
            params.state=params.state!==null?Object.assign({},params.state):{};
            let h_state={ timestamp:Date.now()+n};
            n++;
            let key = history_stack.indexOf(current_state.timestamp);
            key=key+1;
            history_stack.splice(key);
            history_stack.push(h_state.timestamp);
            h_state.history_stack=history_stack;
            params.state.HNState=h_state;
            current_state=h_state;
            return params;
        };
        let listenerReplaceState=function(params){
            params=Object.assign({state:null},params);
            params.state=params.state!==null?Object.assign({},params.state):null;
            let h_state=Object.assign({},current_state);
            h_state.history_stack=history_stack;
            params.state.HNState=h_state;
            return params;
        };
        let desc=Object.getOwnPropertyDescriptors(History.prototype);
        delete desc.constructor;
        Object.defineProperties(History.prototype,{

            replaceState:Object.assign({},desc.replaceState,{
                value:function(state,title,url){
                    let params={state,title,url};
                    HistoryNavigation.dispatchEvent('history.state.replace',params);
                    params=Object.assign({state,title,url},params);
                    params=listenerReplaceState(params);
                    desc.replaceState.value.call(this,params.state,params.title,params.url);
                }
            }),
            pushState:Object.assign({},desc.pushState,{
                value:function(state,title,url){
                    let params={state,title,url};
                    HistoryNavigation.dispatchEvent('history.state.push',params);
                    params=Object.assign({state,title,url},params);
                    params=listenerPushState(params);
                    return desc.pushState.value.call(this, params.state, params.title, params.url);
                }
            })
        });
        HistoryNavigation.addEventListener('popstate',function(event){
            let HNState;
            if(event.state==null){
                HNState=init_HNState;
            } else {
                HNState=event.state.HNState;
            }
            let key_prev=history_stack.indexOf(current_state.timestamp);
            let key_state=history_stack.indexOf(HNState.timestamp);
            let delta=key_state-key_prev;
            let params={delta,event,state:Object.assign({},event.state)};
            delete params.state.HNState;
            HNState.history_stack=history_stack;
            if(event.state!==null){
                event.state.HNState=HNState;
            }
            current_state=HNState;
            HistoryNavigation.dispatchEvent('history.go',params);
        });

    }
    static addEventListener(...arg)
    {
        window.addEventListener(...arg);
    }
    static removeEventListener(...arg)
    {
        window.removeEventListener(...arg);
    }
    static dispatchEvent(event,params)
    {
        if(!(event instanceof Event)){
            event=new Event(event,{cancelable:true});
        }
        event.params=params;
        window.dispatchEvent(event);
    };
}
HistoryNavigation.init();

// exemple

HistoryNavigation.addEventListener('popstate',function(event){
    console.log('Will not start because they blocked the work');
});
HistoryNavigation.addEventListener('history.go',function(event){
    event.params.event.stopImmediatePropagation();// blocked popstate listeners
    console.log(event.params);
    // back or forward - see event.params.delta

});
HistoryNavigation.addEventListener('history.state.push',function(event){
    console.log(event);
});
HistoryNavigation.addEventListener('history.state.replace',function(event){
    console.log(event);
});
history.pushState({h:'hello'},'','');
history.pushState({h:'hello2'},'','');
history.pushState({h:'hello3'},'','');
history.back();

    ```

Der document.mouseover funktioniert nicht für IE und FireFox. Ich habe es jedoch versucht:

$(document).ready(function () {
  setInterval(function () {
    var $sample = $("body");
    if ($sample.is(":hover")) {
      window.innerDocClick = true;
    } else {
      window.innerDocClick = false;
    }
  });

});

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

Dies funktioniert für Chrome und IE und nicht für FireFox. Ich arbeite immer noch daran, FireFox richtig zu machen. Jede einfache Methode zum Erkennen des Zurück- / Vorwärtsklickens des Browsers ist willkommen, insbesondere in JQuery, aber auch in AngularJS oder einfachem Javascript.

 <input style="display:none" id="__pageLoaded" value=""/>


 $(document).ready(function () {
        if ($("#__pageLoaded").val() != 1) {

            $("#__pageLoaded").val(1);


        } else {
            shared.isBackLoad = true;
            $("#__pageLoaded").val(1);  

            // Call any function that handles your back event

        }
    });

Der obige Code hat bei mir funktioniert. Wenn der Benutzer in mobilen Browsern auf die Schaltfläche "Zurück" klickte, wollten wir den Seitenstatus gemäß seinem vorherigen Besuch wiederherstellen.

Ich habe es gelöst, indem ich das ursprüngliche Ereignis verfolgt habe, das das ausgelöst hat hashchange(sei es ein Wischen, ein Klicken oder ein Rad), damit das Ereignis nicht mit einer einfachen Landung auf der Seite verwechselt wird, und ein zusätzliches Flag in verwendet habe jede meiner Ereignisbindungen. Der Browser setzt das Flag nicht erneut auf, falsewenn Sie auf die Schaltfläche "Zurück" klicken:

var evt = null,
canGoBackToThePast = true;

$('#next-slide').on('click touch', function(e) {
    evt = e;
    canGobackToThePast = false;
    // your logic (remember to set the 'canGoBackToThePast' flag back to 'true' at the end of it)
}

Ich habe die oben genannten Optionen ausprobiert, aber keine davon funktioniert für mich. Hier ist die Lösung

if(window.event)
   {
        if(window.event.clientX < 40 && window.event.clientY < 0)
        {
            alert("Browser back button is clicked...");
        }
        else
        {
            alert("Browser refresh button is clicked...");
        }
    }

Weitere Informationen finden Sie unter diesem Link http://www.codeproject.com/Articles/696526/Solution-to-Browser-Back-Button-Click-Event-Handli