如何使用angular度检测浏览器后退button单击事件？

是否有可能通过在浏览器中使用历史loggingbutton来检测用户是否进入了页面？ 最好我想用angular.js来检测这个动作。

我不想使用angular度路由。 它也应该工作，如果用户提交表单，并成功提交到服务器和redirect后，也应该是可能的，如果用户返回到表单使用浏览器的后退button。

Answer 1

这是Angular的解决scheme。

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?'); } }); }); 

我正在使用运行块来启动这个。 首先，我将实际位置存储在$ rootScope.actualLocation中，然后我监听$ locationChangeSuccess，当它发生时，我用新值更新actualLocation。

在$ rootScope中，我监视位置path的变化，如果新位置等于previousLocation，则是因为$ locationChangeSuccess未被触发，这意味着用户已经使用了历史logging。

这是小提琴 。

Answer 2

如果你想要更精确的解决scheme（反向检测） Bertrand提供的扩展解决scheme：

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

Answer 3

对于ui路由，我使用下面的代码。

在App.run()里面，使用

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

如果需要的话，你可以在'$ stateChangeSuccess'事件中得到'previousState'的值。

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

Answer 4

JavaScript有一个本机历史对象。

 window.history 

检查MDN的更多信息; https://developer.mozilla.org/en-US/docs/DOM/window.history?redirectlocale=en-US&redirectslug=window.history

不知道这是多么好的多浏览器支持寿。

更新

看来我上面所说的只是Geckotypes的浏览器。

对于其他浏览器尝试使用history.js ; https://github.com/browserstate/history.js

Answer 5

我知道这是一个老问题。 无论如何 ：）

贝玛的回答看起来不错。 然而，如果你想使它与'正常'的URL（没有散列我猜），你可以比较绝对path，而不是由$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?'); } }); }); 

Answer 6

我解决这个问题是

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

Answer 7

当按下button时，angular度只触发$ routeChangeStart事件， $ locationChangeStart不触发。