79

是否可以通过使用浏览器中的历史返回按钮检测用户进入页面？最好我想使用 angular.js 来检测这个动作。

我不想使用角度路由。如果用户提交表单并且在成功提交到服务器并重定向之后，它也应该工作，如果用户使用浏览器的后退按钮返回表单也应该是可能的。

4

8 回答 8

120

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

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

在 $rootScope 我观察位置路径的变化，如果新位置等于 previousLocation 是因为 $locationChangeSuccess 没有被触发，这意味着用户已经使用了历史记录。

于 2013-04-04T16:22:12.080 回答
11

如果您想要更精确的解决方案（前后检测），我扩展了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++;

        }

    }

 });
于 2013-11-18T01:00:46.370 回答
8

对于 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;
    });
于 2016-06-17T10:50:44.170 回答
1

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

Bema 的回答看起来很棒。但是，如果您想让它与“正常”网址一起使用（我猜没有哈希），您可以比较绝对路径，而不是返回的路径$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?');
        }
    });
});
于 2015-07-23T11:34:55.733 回答
0

JavaScript 有一个原生的历史对象。

window.history

查看 MDN 了解更多信息；https://developer.mozilla.org/en-US/docs/DOM/window.history?redirectlocale=en-US&redirectslug=window.history

不确定它在多浏览器支持上有多好。

更新

似乎我上面所说的仅适用于 Gecko 类型的浏览器。

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

于 2013-04-04T14:28:04.113 回答
0

所以，我已经将@Bema 的答案转录成 TypeScript，这就是它的样子：

namespace MyAwesomeApp {
    // ReSharper disable once Class
    function detectBackButton(
        $rootScope: ng.IRootScopeService,
        $location: ng.ILocationService
    ) {
        let actualLocation: string = '';

        $rootScope.$on('$locationChangeSuccess',
            () => {
                actualLocation = $location.path();
            });

        $rootScope.$watch(() => $location.path(),
            (newLocation: string, oldLocation: string) => {
                if (actualLocation === newLocation) {
                    //$rootScope.$broadcast('onBackButtonPressed', null);
                }
            });
    }

    detectBackButton.$inject = [
        '$rootScope',
        '$location'
    ];

    angular
        .module('app')
        .run(detectBackButton);
}

我们不必在$rootScope服务之外创建属性，我们可以让我们的“位置更改成功”和“位置更改”代码都关闭局部actualLocation变量。从那里，您可以做任何您喜欢的事情，就像在原始代码中一样。就我而言，我会考虑广播一个事件，以便各个控制器可以做他们必须做的任何事情，但如果你必须这样做，你可以包括全局操作。

感谢您的出色回答，我希望这对其他打字稿用户有所帮助。

于 2018-09-07T20:58:45.370 回答
-2

我对这个问题的解决方案是

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();
    });
});
于 2015-09-14T19:54:02.663 回答
-7

按下后退按钮时，角度仅触发$routeChangeStart事件，$locationChangeStart未触发。

于 2013-08-14T08:32:48.167 回答