Question

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

在这个阶段我正在开发一个演示，而不是一个制作网站。我想拦截浏览器后退按钮，所以如果你导航到一个部分，你将被带回上一部分，而不是离开网页。在一个完美的世界中，这将发生在用于导航到部分的相同动画中。

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

我知道他们有很多关于禁用此网站上的浏览器后退按钮的帖子，通常回复是不是！然而，在我的页面中进入不同的部分就像导航到单独的页面，所以我认为我想要实现的是符合用户的期望。

使用基于AJAX的应用程序通常可以实现类似的方式是使用HTML5的历史API。据我所知，您需要将带有片段的URL添加到浏览器的历史记录中，这样就像mysite.com＃section2。我不确定这对我有用，因为水平滚动不是基于像垂直滚动这样的片段链接。也许我可以使用JavaScript来检测URL何时以＃section2这样的片段结束并更改CSS以使第二部分在视口中？我想虽然没有办法给它制作动画？

Answer 1

在浏览器上更改后退按钮的本机行为的想法肯定是一个红旗，表明某些内容正在接近错误，并且实际上不可能跨浏览器。

我会处理unload event，以便浏览器尝试在州之间平滑过渡。

Answer 2

我同意Gabe一样，试图改变后退按钮的行为是通常一个红旗;但是，在阅读了你想要做的事情之后，我没有看到任何问题。（这可能是一个术语 - 你并没有真正尝试更改后退按钮的行为，你试图将状态添加到浏览器历史记录中，以便后退按钮可以浏览它。）

您需要使用jQuery BBQ，它管理网址的哈希值（#之后的部分）。聆听hashchange事件并相应地在您的面板之间制作动画：

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

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

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

Answer 3

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

以这些为例：

按钮代码：

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

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

即使您没有添加实际的锚链接以使哈希标记有效，您仍然可以使用javascript的window.location.hash属性来自行导航用户。

更改我的Web应用程序的浏览器后退按钮行为？

3 个答案: