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

Posted 2023-02-19

【中文标题】Angular js-模拟浏览器后退/前进按钮禁用

【英文标题】：Angular js- Simulate browser back/forward button disabling

【发布时间】：2015-02-14 01:17:27

【问题描述】：

我正在开发需要我模拟浏览器后退/前进按钮的应用程序（我已经实现了 2 个按钮）。我可以使用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;

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

【问题讨论】：

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

转发应该始终被禁用，除非您在单击其他任何内容之前单击了返回。因此，在每个导航上禁用前进，并仅在短 setTimeout 上的后退命令后解锁。

我可以在点击后退按钮时启用前进按钮，但我更关心如何确定它是否是最后一页，然后在没有更多页面可进一步浏览时禁用前进按钮。

如果你使用 angular，获取 $state.current.name 并在 if 块下禁用 if ($state.current.name=='lastPage')toDo()

如果用户从其他网页访问您的网页怎么办？然后他将在 window.history 中有记录，当他单击“后退”按钮时，他会离开您的应用程序。这是一种理想的行为吗？

【参考方案1】：

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

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

【参考方案2】：

我相信这应该适合你。

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

当你可以向前导航时 typeof window.history.forward 是'function'，当你不能导航时它是'undefined'