防止单页应用程序中的后退和前进按钮重新加载页面

Question

我有一个单页应用程序，页面永远不会被卸载。我在使用url中的#号，并使用JavaScript检测哈希变化，然后使用JS和AJAX更新UI...我不想让前进和后退按钮向服务器发出额外的请求。

目前，当用户第一次访问网站时，会发出一个服务器请求（这是可以接受的）。

Processing by MyController#index as HTML

我的目标是让这个服务器请求在用户在网站上的时间内只发生一次...每次他们点击任何其他链接，我只需在URL中使用“#”来防止新的服务器请求...所以我的所有“a”标签看起来都像这样： 我遇到的问题是，点击后退和前进按钮会触发我的JS hashchange监听器（这正是我想要的）...但它也调用了

Processing by MyController#index as HTML //I DO NOT WANT THIS TO HAPPEN 

这是我目前的功能：

1.) 用户导航到mydomain.com

2.) 启动“Processing by MyController#index as HTML”，发出服务器请求 (这是可以的)

3.) 用户单击链接，现在的URL为mydomain.com/#page1，我使用JS更新视图 (这是可以的)

4.) 用户单击链接，现在的URL为mydomain.com/#page2，我使用JS更新视图 (这是可以的)

5.) 用户单击后退按钮，现在的URL为mydomain.com/#page1，我使用JS更新视图 (这是可以的)

6.) 当用户单击后退按钮时，会自动发出服务器请求重新加载页面(再次调用"Processing by MyController#index as HTML") (这是不可以的) 如何防止用户单击后退按钮时发生第6步？... 我只想更改URL并通过JS更新我的UI，而不需要服务器请求。 另外，我正在使用Ruby on Rails。

- Yaseen Aniss

---

不确定这是否可能。已点赞。 - VSO

你可以尝试使用HTML5历史API http://diveinto.html5doctor.com/history.html - jcubic

你没有明确说明如何到达第6步。你是说一旦完成第5步，你的页面会自动跳转到第6步吗？ - ghybs

@ghybs 是的。这正是发生的事情。 - Yaseen Aniss

奇怪的是，当后退/前进按钮仅触发片段（哈希）更改时，通常不应该有任何网络事务。 - ghybs

Answer 1

你想要做的是不可能的。你不能覆盖浏览器按钮的默认行为，比如后退/前进/停止/刷新等。

你可以创建自己的“后退”和“前进”按钮（并将它们放在实际页面上），并编写它们的事件处理程序以进行 AJAX 调用。

- Stan Shaw

---

我所尝试的只是防止步骤6自动发生...这真的不可能吗？ - Yaseen Aniss

据我所知，是的。不过，我会回到这个帖子上检查一下，以防我错了。 - Stan Shaw

Answer 2

这对我来说很好用 jQuery hashchange事件

- lgabster

Answer 3

终于搞定了。由于某种原因，Turbolinks导致每当单击后退或前进按钮时重新加载页面。我从应用程序中删除了Turbolinks gem，现在一切都完美运行。

- Yaseen Aniss