Javascript 是否更改我的web应用的浏览器后退按钮行为？

我正在制作一个类似应用程序的网页。实际页面比隐藏溢出的浏览器视口宽。单击不同的链接会更改CSS，使其为不同的部分设置动画。下面是一个非常简单的演示：

在这个阶段，我是在做演示，而不是制作网站。我想截取browser back（浏览器返回）按钮，因此，如果您已导航到某个分区，您将返回到上一个分区，而不是离开网页。在一个完美的世界里，这将发生在我用来导航到部分的相同动画上

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

我知道他们在这个网站上发布了很多关于禁用浏览器后退按钮的帖子，通常回复是DONT！然而，进入我的页面的不同部分就像导航到不同的页面，所以我认为我试图实现的是符合用户期望的

使用基于AJAX的应用程序通常可以实现类似的功能，这是使用HTML5的历史API实现的。据我所知，你需要在浏览器的历史记录中添加带有片段的URL，比如mysite.com#section2。我不确定这将为我工作，但由于水平滚动不是像垂直滚动可以基于片段链接。也许我可以

---

使用JavaScript来检测URL何时以#section2这样的片段结尾，并更改CSS以使第二部分在视口中？我想没有办法把它变成动画了吧

改变浏览器上“后退”按钮的本机行为的想法无疑是一个危险信号，表明正在错误地接近某些东西，跨浏览器是不可能的

---

我会处理

unload

事件

，以便浏览器尝试在状态之间平稳过渡。

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

以这些为例：

按钮代码：

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

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

---

即使您没有添加实际的锚链接以使哈希标记工作，您仍然可以使用javascript的

window.location.hash

属性来导航用户自己。

我同意Gabe的观点，尝试更改后退按钮的行为通常是一个危险信号；然而，在阅读了你要做的事情之后，我看不出有什么问题。（这可能是一个术语问题–您并不是真的试图更改后退按钮的行为，而是试图将状态添加到浏览器历史记录中，以便后退按钮可以在其中导航。）

您需要使用，它管理URL哈希上的状态（位于

#

之后的部分）。收听

hashchange

事件，并相应地在面板之间设置动画：

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

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

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

单页应用程序中不会出现

卸载

。如果点击后退按钮，卸载事件肯定会触发。我使用了他们示例中的代码，但它似乎对我不起作用$卸载（函数（）{alert（“Bye now！”；}）@Gabe，是的，如果您离开页面，

unload

将触发。但是，单页应用程序可能会用来添加历史记录实体，这样单击“上一步”就不会离开该页。