浏览器“后退”按钮与jQuery动画页面
我有一个具有挑战性的问题，我一直在争夺一段时间。
问题：当我使用浏览器的后退按钮返回上一页时，在播放完所有动画后，页面将以最终状态显示。 我希望它以初始状态显示并重放动画。
我的网站使用一些基本的jQuery动画。 每个页面的初始状态的主要内容隐藏在浏览器窗口的下边缘之下，当窗口加载时，主要内容动画显示在浏览器中。 当访问者单击任何菜单链接时，主内容会再次卷起并消失在浏览器窗口的上边缘之上 – 然后加载新页面。 使用这两段代码实现了整个过程：
//Animate the content up from below the browser window $('#maincontent').animate({top: "15%"}, 2000); 和
//Animate the content up to hide above the browser window $('#menu a').click(function(event) { event.preventDefault(); var href = this.href; $('#maincontent').animate({ top: '-300%' }, 500, function() { window.location = href; }); });
问题：当单击浏览器后退按钮时，如何使页面显示为初始状态？
我浏览了StackOverflow一段时间了。 人们对此问题进行了很多讨论，但似乎没有人能够找到真正有效的解决方案。 建议包括阻止页面被缓存 – （不起作用，即使它工作，也不会很有效率，因为某些页面确实需要缓存） – 重新加载页面（导致一些特殊的行为，最终没有’无论如何工作 – 使用cookie（没有给出任何代码的具体示例）或使用php（在任何地方都没有给出代码的具体示例）。 我在这个网站上询问了几个问题，并收到了一些建议，但没有一个在我的情况下有效。 所以经过几个不眠之夜，我想问一下是否有人可以真正帮助解决这个问题。
如果有人在成功之前处理了这个问题，如果您能分享您的专业知识并提出可行的解决方案，我将不胜感激！
新编辑：我想我可能找到了解决方案，但我希望有人帮助使用jQuery / JavaScript语法。 我想尝试修改代码以向其添加一个操作，但我不确定如何编写它，以便页面在位置更改为新页面之前重新加载所以而不是显示的第二个代码段上面，我想写这样的东西：
//Animate the content up to hide above the browser window $('#menu a').click(function(event) { event.preventDefault(); var href = this.href; $('#maincontent').animate({ top: '-300%' }, 500, function() { // a code that reloads the same page, something like //window.location = window.location; followed by window.location = href; }); });
– 但我只是不知道怎么写得正确。
或者，也许可以将页面的css值重置为css文件中的默认值并再次触发JavaScript？
有人可以建议正确的代码吗？
免责声明：以下不完全是一个强大的解决方案，但我发现它很有趣，并认为我应该分享。
我在过去有类似的要求，奇怪的是，我最终得到的解决方案是降级到jQuery以利用jQuery 1.3中的错误 。
我只在一个版本的Firefox上测试了这个，所以YMMV，但是请尝试以下方法：
- 使用jQuery 1.3 – 这会在您单击链接时重复动画，然后使用后退按钮返回
- 使用jQuery 1.4 – 这不是
这对我的用例来说足够了，因为我的目标是有限的受众，并且只使用了很少的jQuery。 也就是说，我热切地关注这个主题，希望找到更好的解决方案。
更新
跟踪上面提到的jquery错误，看起来你可以通过禁用bfcache来获得相同的效果。
最简单的方法是向body添加onunload属性 。 （链接中的更多细节）。
这是一个使用jquery 1.6的例子。 再次，没有彻底测试所以YMMV。
- 使用jQuery 1.6，禁用bfcache
以上答案触及了问题，但提供了解决问题的黑客方法。 这似乎是正确的方法。
$(window).bind('pageshow',function(){ alert("This page will run even if the back button was pressed!"); });
有关pageshow / pagehide事件的更多信息，请参见此处： http ： //www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/
您可以更进一步，如下所示：
$(window).bind('pageshow',function(e){ if (e.persisted) { alert("pageshow event handler called. The page was just restored from the Page Cache."); } else { alert("pageshow event handler called for the initial load. This is the same as the load event."); } }
看看这个post 。 他建议下面给出一个hack（从那里复制）：
当用户点击后退按钮时，应该触发onload事件。 不是通过JavaScript创建的元素将保留其值。 我建议在INPUT TYPE =“hidden”或TEXTAREA设置中保持动态创建元素中使用的数据的备份，以显示：none然后onload使用文本框的值来重建动态元素的方式。
如果您不关心重建页面并希望实际重新加载它，那么您可以这样做：代码：
您可以在#menu点击上将隐藏值设为“是”。
HTH