使用ui-router禁用AngularJS中的后退按钮

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用ui-router禁用AngularJS中的后退按钮相关的知识,希望对你有一定的参考价值。

我想禁用我的应用程序的后退按钮(我知道这是愚蠢的,糟糕的用户体验,对世界,甚至犯罪!)但我的客户希望其后退按钮禁用:)。无论如何,我做了以下禁用后退按钮。

我在window.onpopstate事件处理程序中设置了一个标志,如下所示:

window.onpopstate = function() { window.backClicked = true; }

在我的主控制器内部设置如下:

$rootScope.$on('$locationChangeStart', function (event, next, current) {
                if (window.backButton) {
                    event.preventDefault();
                    window.backButton = false;
                }
            });

我想知道这是我的做法不好吗?

我用过这样的其他流行解决方案:

 window.onpopstate = function(event) {
    history.go(1); // or window.forward()
  }; 

但它没有在chrome工作,它没有第一次工作并在州之间流通,并且window.forward()没有重新加载状态,更准确地说:如果我有三个状态名为A,B,C和各自的URL /stateA/stateB/stateC和用户处于状态B,他按下后退按钮突然url更改为/stateA并且状态A加载并且url更改为/stateB但状态B未加载且url是/stateB但加载状态是A.

关于后一种方法的任何解决方案或想法?

请注意,我正在努力解决这个问题超过三天。

答案

  $rootScope.$on('$locationChangeStart', function (event, next, current) {
                if (window.backButton) {
                    event.preventDefault();
                    window.history.forward();// keep redirecting to the same page
                }
        });

以上是关于使用ui-router禁用AngularJS中的后退按钮的主要内容,如果未能解决你的问题,请参考以下文章

使用 AngularJS 中的 UI-Router 将状态重定向到默认子状态

使用AngularJS中的UI-Router将状态重定向到默认子状态

angularjs 中的选项卡无法与 UI-Router 和 UI-bootstrap 一起正常工作

如何在 angularjs ui-router 中的状态之间共享 $scope 数据?

angularJS中的ui-router和ng-grid模块

AngularJs:ui-router 视图中的 ag-grid (templateUrl)