Javascript 在浏览器上获取单独的回调后退和前进按钮

我有一个简单的web应用程序，它由3个简单的页面组成

• a、 html
• b、 html
• c、 html

文件

文件

文件

从上面的代码可以看出，

a.html

有一个到

b.html

的链接，

b.html

有一个到

a.html

和

c.html

的链接，最后，

c.html

有一个到

b.html

的链接

所有的网页将托管在同一个领域，我想一个非常简单的事情我只想在按下浏览器的后退/前进按钮时执行回调（特别是在导航到新页面之前），在回调中，我想要导航到的页面。我不想在实现上述目标的同时更新浏览器的历史记录（我不想破坏用户体验，更新浏览器历史记录将导致用户意外的导航）

我尝试的解决方案是：

• performance.navigation.type

  可以使用，但不能区分后退和前进按钮。所以这对我没有多大用处这里有没有办法区分按下后退和前进按钮？
• 我不想扭曲

  这个.window.history

  ，这样我就可以在

  onpopstate

  上得到一个回调（请参阅）。歪曲windows历史意味着破坏用户体验这可以在不扭曲windows历史记录的情况下完成吗？
• 我知道使用

  window.history

  对象，我找不到前进/后退按钮将导航到的URL。(). 但是，如果我的所有页面都在同一个域中，我可以以某种方式获得“前进/后退”按钮将带我到的url吗。我最关心的是

  b.html

  。当我在

  b.html

  上时，前进/后退按钮可以将我带到

  a.html

  或

  c.html

  ，我如何在实际导航发生之前检测到这一点，以便在此时获取回调并执行它
• 我尝试使用JQuery Mobile，但被卡住了，并将其作为一个单独的应用程序发布。尽管我不确定jquerymobile是如何实现的，它是否会扭曲浏览器的历史
• 我尝试使用React路由器，但它们更适合于单页应用程序，因此也没有太多帮助。这可以使用任何react概念来实现吗

---

每当按下浏览器的后退/前进按钮时，我想执行一个回调

您所能做的就是在卸载之前运行

中的代码

，但无法知道是什么导致该事件发生；用户可能键入了新的网址，或关闭了浏览器。如果您想知道是否按下了“前进/后退”按钮，您需要重新设计页面以克服此限制。能够连接到“后退/前进”并知道它将要去哪里，这听起来像是一个巨大的安全漏洞。@RoryMcCrossan感谢您在卸载前提出的

建议
，但正如你已经说过的，这对我没有多大用处。你能解释一下你所说的“重新设计页面以解决这个限制”是什么意思吗？我能想到的最好的方法是改变使用单页应用程序。然后，您可以准确地控制显示的内容，并知道用户在页面流中的移动方式。这可能需要很大的努力，但你真的没有太多的选择。
每当按下浏览器的后退/前进按钮时，我都想执行回调
你所能做的就是在卸载之前运行
中的代码
，但无法知道是什么导致了该事件的发生；用户可能键入了新的网址，或关闭了浏览器。如果您想知道是否按下了“前进/后退”按钮，您需要重新设计页面以克服此限制。能够连接到“后退/前进”并知道它将要去哪里，这听起来像是一个巨大的安全漏洞。@RoryMcCrossan感谢您在卸载前提出的
建议
，但正如你已经说过的，这对我没有多大用处。你能解释一下你所说的“重新设计页面以解决这个限制”是什么意思吗？我能想到的最好的方法是改变使用单页应用程序。然后，您可以准确地控制显示的内容，并知道用户在页面流中的移动方式。这可能需要很大的努力，但实际上您没有太多的选择。