AngularJS- 模拟浏览器后退/前进按钮禁用

Question

我正在开发一个应用程序，需要模拟浏览器的后退/前进按钮（已经实现了两个按钮）。 我能够使用 window.history.forward() 和 window.history.back() 实现这个功能。这个功能已经按照预期工作。

但是我有一个问题，当没有更多页面可以浏览时，我需要禁用前进按钮，反之给后退按钮添加同样的要求。

我已经尝试使用以下解决方法，但都没有效果。

if(!window.history.next){
    $scope.abcService.enableForwardButton = false;
}

即使我没有更多页面可浏览，这个if条件也不会得到满足。

var index = window.history.length;
if(window.history[index] != window.location)
{
    $scope.abcService.enableForwardButton = true;
}

任何输入都将有所帮助。 注意：禁用按钮是应用程序的强制要求。

- Amit

---

你应该使用 $window 服务，而不是直接使用 window。 - Fals

前进按钮应该始终被禁用，除非您在点击其他内容之前点击了后退按钮。因此，在每次导航时都要禁用前进按钮，并在短暂的setTimeout后仅在后退命令后解锁。 - dandavis

我可以在单击“返回”按钮时启用“前进”按钮，但更关注的是如何确定是否为最后一页，当没有更多页面可供浏览时禁用“前进”按钮。 - Amit

如果您正在使用Angular，请获取$state.current.name并在if块下禁用，例如：if ($state.current.name == 'lastPage') {toDo()}。 - syarul

如果用户从其他网页进入您的页面，会发生什么？那么他将在window.history中有记录，当他单击“返回”按钮时，他将离开您的应用程序。这是期望的行为吗？ - David Votrubec

Answer 1

$location服务可能对您有用。 https://docs.angularjs.org/api/ng/service/$location#state

此外，我不确定它与angular兼容性如何，但您可能想查看https://github.com/browserstate/history.js/

- jeff.d

Answer 2

我相信这对你应该有效。

if(typeof window.history.forward!=='function'){
  $scope.abcService.enableForwardButton = false;
}

当您可以向前导航时，window.history.forward的类型为'function'，当您无法导航时，则为'undefined'

- Michael Wallace