当前位置：文江博客话题详情

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

发布于 2024-11-11 22:10:02 字数 358 浏览 4 评论 0原文

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

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

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

我认为这可以通过在通过浏览器后退按钮访问页面时强制刷新页面来实现 - 尽管我可能是错的。我非常感谢对此的建议！

（这个话题之前已经提出过，但不知何故，我在这个网站上找到的答案都没有完全解决这个问题。）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尽揽少女心 2024-11-18 22:10:02

Shawn Chin 找到了解决这个问题的简单而优雅的方法。请参阅此讨论：浏览器“后退”按钮与 jQuery 动画页面

回复收藏 0 原文

沦落红尘 2024-11-18 22:10:02

对于初学者来说，您的网站似乎在 Chrome 中运行良好（没有隐藏内容）。但是，当我在 Firefox 中加载页面时，我看到了您所描述的行为。

但是，要强制页面“刷新”，您可以首先阻止其缓存。尝试将类似的内容添加到部分。

<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">

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

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

。对于您的网站，类似这样的操作应该可行。

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

请注意，您的页面上只能有一个 window.onload 或 $(document).ready。因此，如果您已经有一个，只需将 if 语句放入其中即可。

For starters, your site seems to work fine in Chrome (no hidden content). However, I see the behavior you describe when I load the page in Firefox.

However, to force your page to 'refresh', you can prevent it from caching in the first place. Try adding something like this to the <head> section.

<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">

Really, these headers should be pushed from the server. See this question or this question.

Alternatively, you can check the position of the hidden div when the page loads (in the $(document).ready() section). If it's not where it's supposed to be, reload the page using location.reload();

For your site, something like this should work.

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

Please note that you should only have ONE window.onload or $(document).ready on your page. So if you already have one, simply place the if statement in there.

回复收藏 0 原文

~没有更多了~