Come rilevare l’evento click del pulsante Indietro del browser utilizzando angular?

È ansible rilevare che un utente ha inserito una pagina utilizzando il pulsante Indietro della cronologia nel suo browser? Preferibilmente voglio rilevare questa azione usando angular.js.

Non voglio usare il routing angular. Dovrebbe funzionare anche se un utente invia un modulo e dopo aver inviato correttamente al server e reindirizzato, dovrebbe essere ansible anche se l’utente torna al modulo utilizzando il pulsante Indietro del browser.

Ecco una soluzione con Angular.

myApp.run(function($rootScope, $route, $location){ //Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to //bind in induvidual controllers. $rootScope.$on('$locationChangeSuccess', function() { $rootScope.actualLocation = $location.path(); }); $rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) { if($rootScope.actualLocation === newLocation) { alert('Why did you use history back?'); } }); }); 

Sto usando un blocco di esecuzione per avviare questo. Per prima cosa memorizzo la posizione attuale in $ rootScope.actualLocation, poi ascolto $ locationChangeSuccess e quando succede aggiorno actualLocation con il nuovo valore.

Nel $ rootScope osservo le modifiche nel percorso della posizione e se la nuova posizione è uguale a previousLocation è perché $ locationChangeSuccess non è stato triggersto, il che significa che l’utente ha utilizzato la cronologia.

Se vuoi una soluzione più precisa (rilevando avanti e indietro) ho esteso la soluzione fornita da Bertrand :

 $rootScope.$on('$locationChangeSuccess', function() { $rootScope.actualLocation = $location.path(); }); $rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) { //true only for onPopState if($rootScope.actualLocation === newLocation) { var back, historyState = $window.history.state; back = !!(historyState && historyState.position < = $rootScope.stackPosition); if (back) { //back button $rootScope.stackPosition--; } else { //forward button $rootScope.stackPosition++; } } else { //normal-way change of page (via link click) if ($route.current) { $window.history.replaceState({ position: $rootScope.stackPosition }); $rootScope.stackPosition++; } } }); 

Per l’ui-routing, sto usando il codice seguente.

All’interno di App.run() , utilizzare

  $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) { if (toState.name === $rootScope.previousState ) { // u can any 1 or all of below 3 statements event.preventDefault(); // to Disable the event $state.go('someDefaultState'); //As some popular banking sites are using alert("Back button Clicked"); } else $rootScope.previousState= fromState.name; }); 

È ansible ottenere il valore ‘previousState’ nell’evento ‘$ stateChangeSuccess’ anche come segue se si desidera.

  $rootScope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) { $rootScope.previousStatus = fromState.name; }); 

So che è una vecchia domanda. Comunque 🙂

La risposta di Bema sembra grandiosa. Tuttavia, se vuoi farlo funzionare con URL “normali” (senza hash, suppongo), puoi confrontare il percorso assoluto, invece di quello restituito da $location.path() :

 myApp.run(function($rootScope, $route, $location){ //Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to //bind in induvidual controllers. $rootScope.$on('$locationChangeSuccess', function() { $rootScope.actualLocation = $location.absUrl(); }); $rootScope.$watch(function () {return $location.absUrl()}, function (newLocation, oldLocation) { if($rootScope.actualLocation === newLocation) { alert('Why did you use history back?'); } }); }); 

JavaScript ha un object di storia nativo.

 window.history 

Controlla il MDN per maggiori informazioni; https://developer.mozilla.org/en-US/docs/DOM/window.history?redirectlocale=en-US&redirectslug=window.history

Non sei sicuro di quanto sia buono con il supporto multi-browser.

Aggiornare

Sembra che quello che ho chiamato sopra sia solo per i browser di tipo Gecko.

Per altri browser prova a utilizzare history.js ; https://github.com/browserstate/history.js

Il mio Solutio a questo problema è

 app.run(function($rootScope, $location) { $rootScope.$on('$locationChangeSuccess', function() { if($rootScope.previousLocation == $location.path()) { console.log("Back Button Pressed"); } $rootScope.previousLocation = $rootScope.actualLocation; $rootScope.actualLocation = $location.path(); }); }); 

quando si preme il pulsante indietro, l’angolo spara solo $ evento $ routeChangeStart , $ locationChangeStart non triggersto .