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 ?

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 ?

• javascript
• jquery
• html
• firefox

• I dont think this works in chrome either, the value is always 'no' – Sully Commented May 1, 2012 at 20:53
• In chrome the anonymous function gets invoked and the page is not reloaded. But still since the page is not cached it does not matter. My issue is that in Firefox the the function is not even invoked. – mahesmohan Commented May 1, 2012 at 20:59

2 Answers 2

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.

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>