blocks|key|342596|text|这是一个使用Angular的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342597|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?');
++++++++}
++++});
});|code-block|syntax|javascript|342598|我正在使用run块来启动它。首先，我将实际位置存储在$rootScope.actualLocation中，然后侦听$locationChangeSuccess，当发生这种情况时，我用新值更新actualLocation。|342599|在$rootScope中，我观察位置路径的变化，如果新位置等于previousLocation，是因为$locationChangeSuccess没有触发，这意味着用户已经重新使用了历史记录。|342600|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Here is a solution with Angular. 

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

I am using a run block to kickstart this. First I store the actual location in $rootScope.actualLocation, then I listen to $locationChangeSuccess and when it happens I update actualLocation with the new value.

In the $rootScope I watch for changes in the location path and if the new location is equal to previousLocation is because the $locationChangeSuccess was not fired, meaning the user has used the history back.

blocks|key|124747|text|如果您想要更精确的解决方案(检测后退和转发)，我扩展了Bertrand提供的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|124748|$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%2B%2B;
++++++++}

++++}+else+{
++++++++//normal-way+change+of+page+(via+link+click)

++++++++if+($route.current)+{

++++++++++++$window.history.replaceState({
++++++++++++++++position:+$rootScope.stackPosition
++++++++++++});

++++++++++++$rootScope.stackPosition%2B%2B;

++++++++}

++++}

+});|code-block|syntax|javascript|124749|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/736482/bertrand^0|R|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

If you want more precise solution (detecting back and forward) I extended solution delivered by <a href="https://stackoverflow.com/users/736482/bertrand">Bertrand</a>:

<pre><code>$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 &amp;&amp; historyState.position &lt;= $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++;

 }

 }

 });
</code></pre>

blocks|key|124793|text|我知道这是一个老问题。无论如何:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124794|Bema的答案看起来很棒。然而，如果你想让它与‘普通’urls一起工作(我想没有哈希)，你可以比较绝对路径，而不是$location.path()返回的路径|offset|length|style|CODE|124795|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?');
++++++++}
++++});
});|code-block|syntax|javascript|124796|entityMap^0|0|1L|G|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I know it is an old question. Anyways :) 

Bema's answer looks great. However, if you want to make it work with 'normal' urls (without hash I guess), you could compare absolute path, instead of the one returned by <code>$location.path()</code>:

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

blocks|key|342669|text|我对这个问题的解决方案是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342670|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();
++++});
});|code-block|syntax|javascript|342671|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My Solutio to this problem is

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

blocks|key|342701|text|对于ui-routing，我使用以下代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342702|在App.run()中，使用|offset|length|style|CODE|342703|+$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;
+++});|code-block|syntax|javascript|342704|你也可以在'$stateChangeSuccess‘事件中获得'previousState’的值，如果你想要的话，如下所示。|342705|++++$rootScope.$on("$stateChangeSuccess",+function+(event,+toState,+toParams,+fromState,+fromParams)+
+++{

++++++++$rootScope.previousStatus+=+fromState.name;
++++});|342706|entityMap^0|0|1|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

For ui-routing, I'm using the below code.

Inside <code>App.run()</code>, use

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

You can get the 'previousState' value in '$stateChangeSuccess' event also like as follows if `you want.

<pre><code> $rootScope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) 
 {

 $rootScope.previousStatus = fromState.name;
 });
</code></pre>

Is it possible to detect that a user entered a page through using the history back button in his browser? Preferably I want to detect this action using angular.js.

I do not want to use angular routing. It should also work if a user submits a form and after a successful submit to the server and a re-direct, it should also be possible if the user goes back to the form using the back button of the browser.

How to detect browser back button click event using angular?

服务器

是否可以检测到用户通过使用浏览器中的历史记录后退按钮进入页面？我最好使用angular.js来检测这个动作。我不想使用角度布线。如果用户提交表单，并且在成功提交到服务器并重定向之后，它也应该可以工作，如果用户使用浏览器的后退按钮返回到表单，它也应该是可能的。

问如何使用angular检测浏览器后退按钮点击事件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用angular检测浏览器后退按钮点击事件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用angular检测浏览器后退按钮点击事件？
EN