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

我正在制作一个'app like'网页。实际页面比隐藏溢出的浏览器视口更宽。点击不同的链接会将CSS变为动画到不同的部分。这是一个非常简单的演示： http://smartpeopletalkfast.co.uk/pos/更改我的web应用程序的浏览器后退按钮行为？

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

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

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

基于AJAX的应用程序通常可以实现类似的方式是使用HTML5的历史API。据我所知，你需要添加带有片段的URL到浏览器的历史记录中，就像mysite.com＃section2一样。我不知道这会适用于我，但因为水平滚动不是基于像垂直滚动这样的片段链接。也许我可以使用JavaScript来检测URL何时以＃section2之类的片段结束并更改CSS，以便第二部分位于视口中？我想没有办法让这个动画呢？

来源

2012-03-20 Evans

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

把这些例如：

代码按钮：

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

只要改变前进和后退按钮的锚页面上因为它对应于用户正在导航的位置在...之前。这使得浏览器可以跟踪用户在页面上的位置。

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

来源

2012-03-20 14:32:29

改变浏览器上后退按钮原生行为的想法绝对是一个红旗标志，表明正在接近错误的东西，并且不可能跨浏览器。

我会处理unloadevent让浏览器尝试平滑过渡状态。

来源

2012-03-20 14:28:25 Gabe

有没有打算在单页应用中成为“卸载”。 – josh3736 2012-03-20 14:31:30

如果后退按钮被击中，卸载事件肯定会触发。 – Gabe 2012-03-20 14:33:28

http://api.jquery.com/unload/我用他们的例子中的代码，但它似乎并没有为我工作。 $（window）.unload（function（）{alert（“Bye now！”）;}）; – Evans 2012-03-20 14:41:56

我同意Gabe在试图改变后退按钮的行为是通常是一个红旗;然而，在阅读你想要做的事情之后，我没有看到问题。（这可能是一个术语事情–你不是真的想变化后退按钮的行为，你要添加状态到浏览器历史记录，以便后退按钮可以通过它导航。）

你将要使用jQuery BBQ，它管理URL散列上的状态（#之后的部分）。侦听hashchange事件，并相应的面板之间的动画：

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

现在，你甚至不用将事件处理程序附加到你的下一个页面按钮–只是其链接：

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

来源

2012-03-20 14:40:25 josh3736

不错的，谢谢 – 2013-03-18 21:19:35

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

回答

相关问题