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

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

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

以这些为例：

• http://smartpeopletalkfast.co.uk/pos/#filters
• http://smartpeopletalkfast.co.uk/pos/#map

按钮代码：

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

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

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