Reload the page when visited by clicking Back button in Firefox

Question

I have a page which animates entire body out of the viewer's screen as a transition. It works fine but when user clicks back button in the browser Firefox brings up the cached page from the history which does not have a body.

So it is simple enough for me to reload the page when visited via the back button.

I've tried the following code to reload the page so as to avoid repeted reloading.

<script type="text/javascript">
  window.onload=function(){
    var e=document.getElementById("refreshed");
    if(e.value=="no")e.value="yes";
    else{e.value="no";location.reload();}
  }
</script>
<input type="hidden" id="refreshed" value="no">

It did not solve the issue as the anonymous function was not even invoked.

So I tried setting the headers so that the browser would not cache the page.

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

It also did not solve the issue.

The page works fine in Chrome.

The version of Firefox I use is 12.0

How can I get the page to reload using Javascript, JQuery or any other client side scripts ?

Answer 1

There is no onload event that fires when navigating back to an in-memory-cached page.

You have three main options, I think:

1. Use the onpageshow event (which does fire when navigating to a cached page).
2. Prevent in-memory caching of your page by adding an unload event listener (which can just be an empty function).
3. Don't do the annoying unload animation.

Answer 2

I didn't try it but setTimeout may help.

<script>
setTimeout(function() {
var e=document.getElementById("refreshed");
    if(e.value=="no")e.value="yes";
    else{e.value="no";location.reload();}
}, 1000);
</script>