Question

我正在制作的网站有一些基本的jQuery动画效果，包括在每个新页面打开时从浏览器窗口下边缘滑动主要内容的动画，并将相同的内容滑出在打开新页面之前单击任何菜单链接时的浏览器窗口。

当我使用浏览器的“后退”按钮返回上一页时，主要内容保持隐藏状态（因为页面上发生的最后一件事是将内容从浏览器窗口中删除的动画）。

问题：点击浏览器的后退按钮，如何在访问页面时将页面刷新/重置为初始状态？

我认为这可以通过浏览器后退按钮强制页面刷新来实现 - 即使我可能错了。我非常感谢你的建议！

（此主题之前已提出，但我在本网站上找到的答案都没有解决问题。）

Answer 1

Shawn Chin找到了这个问题的简单而优雅的解决方案。请参阅此讨论：Browser "Back" Button vs. jQuery-animated page

Answer 2

首先，您的网站似乎在Chrome中运行良好（没有隐藏内容）。但是，我在Firefox中加载页面时会看到您描述的行为。

但是，要强制您的页面“刷新”，您可以首先阻止它进行缓存。尝试将这样的内容添加到<head>部分。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

实际上，应该从服务器推送这些标头。请参阅this question或this question。

或者，您可以在页面加载时检查隐藏div的位置（在$(document).ready()部分中）。如果它不在应有的位置，请使用location.reload();

重新加载页面

对于您的网站，此类内容应该有效。

window.onload = function() {
  if (document.getElementById("content").offsetParent.offsetTop < 0) { 
      location.reload(); }
  }

请注意，您的网页上只能有一个window.onload或$(document).ready。因此，如果您已经有一个，只需将if语句放在那里。

如何通过浏览器的后退按钮访问jQuery动画页面到初始状态？

2 个答案: