如何使用angular检测浏览器后退按钮单击事件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (486)

是否有可能通过在浏览器中使用历史记录按钮来检测用户是否进入了页面?

如果用户提交表单,并且在成功提交给服务器并重定向之后,应该也可以工作,如果用户使用浏览器的后退按钮返回到表单,也应该是可能的。

提问于
用户回答回答于

代码 :

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中,我监视位置路径中的更改,并且如果新位置等于previousLocation,则是因为$ locationChangeSuccess未被触发,这意味着用户已使用历史记录。

用户回答回答于

代码:

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

        }

    }

 });

扫码关注云+社区

领取腾讯云代金券