How to restore jQuery-animated page to initial state when visited via browser's back button?_问答_开发者

How to restore jQuery-animated page to initial state when visited via browser's back button?

开发者 https://www.devze.com 2023-03-09 18:10 出处：网络

The website I\'m making has a few basic jQuery-animated effects, including the animation that slides the main content from below the lower edge 开发者_StackOverflow社区of the browser window when every

The website I'm making has a few basic jQuery-animated effects, including the animation that slides the main content from below the lower edge 开发者_StackOverflow社区of the browser window when every new page opens, and slides the same content up and out of the browser window when any menu link is clicked, before opening the new page.

When I go back to the previous page using the browser's "back" button, the main content remains hidden (because the last thing that happen to the page was the animation that removed the content out of the browser window).

Question: how can I refresh / reset the page to its initial state when it's visited by clicking the browser's back button?

I assume this can be achieved by forcing a page refresh when it's visited via browser back button - even though I may be wrong. I would greatly appreciate advice on this!

(This topic has been brought up before but somehow none of the answers I found on this website quite solves the issue.)

The simple and elegant solution of this problem was found by Shawn Chin. Please see this discussion: Browser "Back" Button vs. jQuery-animated page

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.