使用 AngularJS/Javascript 仅禁用浏览器后退按钮导航（不是应用程序中的链接）

Posted 2023-02-23

【中文标题】使用 AngularJS/Javascript 仅禁用浏览器后退按钮导航（不是应用程序中的链接）

【英文标题】：Disable Only Browser Back Button navigation(not links in app) with AngularJS/Javascript

【发布时间】：2015-12-21 20:15:38

【问题描述】：

我正在使用 AngularJS 进行 SPA。我想使用应用程序中的链接浏览应用程序状态，并且我想在单击后退按钮时阻止相同的导航。

我找到的所有解决方案，包括 angularJs 中的 $locationChangeStart，当我点击我的应用程序中的链接时也会阻止导航。

请提供仅阻止浏览器后退按钮导航并允许通过单击应用程序中的链接进行导航的解决方案。

【问题讨论】：

这在技术上是不可能的（通过 javascript 改变浏览器行为），因为这对用户来说是一个巨大的安全问题。您需要解决此问题。我主要看到 iFrame 捕获满足此需求（基本上将您的内容包装在 iFrame 中会使 Brwoser 的后退按钮对父站点无用）

Control or Disable Browser Back Button with Javascript or AngularJS的可能重复

@SANN3，我已经尝试过这个解决方案。它通过单击应用程序中的链接以及浏览器后退按钮来防止导航。因此不是我的问题的解决方案。

preventDefault 防止了 Angular 通常会做的任何行为。您必须找出一种方法来过滤掉对当前应用程序状态有效的链接，并有条件地执行 preventDefault。恐怕没有什么神奇的方法了。

【参考方案1】：

执行此操作的最简单方法是映射从当前应用程序状态 (url) 到有效的下一个应用程序状态 (url) 的转换，并且仅在从当前状态转换到 $locationChangeStart 所需的状态时才使用 preventDefault无效。

如果你这样做，你不仅可以防止用户使用后退按钮，还可以防止在浏览器中放置不受欢迎的 url 以创建无效的应用程序状态并可能损害你的应用程序。

我建议您不要使用其他答案中链接的“关于历史更改 history.forward”的方法，这是可能的最糟糕的用户体验，使其对用户透明。