更改我的网络应用程序的浏览器后退按钮行为？答案

【问题标题】：Change browser back button behaviour for my web app?更改我的网络应用程序的浏览器后退按钮行为？
【发布时间】：2012-04-05 00:45:17
【问题描述】：

我正在制作一个“类似应用”的网页。实际页面比隐藏溢出的浏览器视口更宽。单击不同的链接会将 CSS 更改为不同部分的动画。这是一个非常简单的演示： http://smartpeopletalkfast.co.uk/pos/

在这个阶段，我正在做一个演示，而不是一个生产站点。我想拦截浏览器的后退按钮，因此如果您导航到某个部分，您将被带回上一个部分，而不是离开网页。在一个完美的世界中，这将发生在与导航到部分相同的动画中。

这可以实现吗？通过研究，我认为不可能拦截和禁用默认的浏览器后退按钮。

我知道他们有很多关于禁用此站点上的浏览器后退按钮的帖子，通常响应是不要！然而，转到我页面中的不同部分就像导航到单独的页面，所以我认为我试图实现的是与用户期望保持一致。

使用基于 AJAX 的应用程序通常可以实现类似的方法是使用 HTML5 的 History API。据我了解，您需要将带有片段的 URL 添加到浏览器的历史记录中，例如 mysite.com#section2。我不确定这对我是否有用，但是因为水平滚动不像垂直滚动那样基于片段链接。也许我可以使用 JavaScript 检测 URL 何时以 #section2 之类的片段结尾并更改 CSS 以使第二部分在视口中？我想没有办法对此进行动画处理吗？

【问题讨论】：

标签： javascript html web-applications back browser-history

【解决方案1】：

改变浏览器上后退按钮的本机行为的想法绝对是一个危险信号，表明正在处理错误，并且实际上不可能跨浏览器。

我会处理 unload event 以便浏览器尝试在状态之间平稳过渡。

【讨论】：

在单页应用中不会有unload。
如果点击返回按钮，卸载事件肯定会触发。
api.jquery.com/unload 我使用了他们示例中的代码，但它似乎对我不起作用。 $(window).unload( function () { alert("Bye now!"); } );
@Gabe，是的，如果您离开页面，unload 将触发。但是，单页应用可能会使用a solution 添加历史记录，这样点击后退就不会离开页面。

【解决方案2】：

单击导航按钮（在您的页面上）时使用 HTML 锚标记。因此，滚动到锚点所在的位置（顶部，左侧）。此行为将使浏览器的后退和前进按钮导航到锚点。

以这些为例：

按钮代码：

<a href="#filters">Filters &lt;</a>
<a href="#map">Map &gt;</a>

只需更改页面上前进和后退按钮的锚点，因为它对应于用户导航到的位置。这使浏览器可以跟踪用户在您页面上的位置。

即使您不添加实际的锚链接来使哈希标签起作用，您仍然可以使用 javascript 的 window.location.hash 属性自己导航用户。

【讨论】：

【解决方案3】：

我同意 Gabe 的观点，即试图改变后退按钮的行为通常是一个危险信号；但是，在阅读了您要执行的操作后，我认为没有问题。（这可能是一个术语问题——您并没有真正尝试更改后退按钮的行为，而是尝试将状态添加到浏览器历史记录中，以便后退按钮可以在其中导航。）

您需要使用jQuery BBQ，它管理 URL 哈希的状态（# 之后的部分）。监听hashchange 事件并相应地在您的面板之间设置动画：

$(window).on('hashchange', function() {
    var page = $.bbq.getState('page');
    // animate to `page`
});

现在，您甚至不必将事件处理程序附加到下一页按钮 - 只需链接它：

<a href="#page=map">Map</a>

【讨论】：