Force Firefox to Reload Page on Back Button
In my case, after the final user Post his new data to server, he is redirected to another page. But when the final user press the back button, the form is pre-populated with the old data. So, reload page is needed.
I did a workaround for Firefox and another for Google Chrome. They have different behavior to show cached pages.
Doing this will prevent Firefox to cache the page and the back button will bring the page from server.
window.onunload = function(){};
But Google Chrome do it in another way and the solution above did not work for me. So I did another workaround for Chrome. I did a flag that mark the form as dirty.
At the top of <head>, before load anything, I check the cookie
if(document.cookie.match(/my-form=dirty/)) {
document.cookie = "my-form=; expires=-1; path="+document.location.pathname;
window.location.reload();
}
With a help of jQuery, I write the cookie when user modify something
$(document).load(function(){
$(':input').change(function(){
document.cookie = "my-form=dirty; expires=86400000; path="+document.location.pathname;
})
})
Good to know:
- http://code.google.com/p/chromium/issues/detail?id=2636
- https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
This solution worked for me (and I believe is a bit simpler than other solutions suggested):
$(window).bind('pageshow', function() {
// This event is called only by FireFox. Because Firefox doesn't reload the page when the user uses the back button,
// or when we call history.go.back(), we need to force the reload for the applicatino to work similar to Chrome and IE (11 at least).
// Doc: https://developer.mozilla.org/en-US/docs/Listening_to_events_in_Firefox_extensions
location.reload();
});
I call this code on every page load, if the browser is FireFox. (To find out if the currently running browser is Firefox, see here).
add this between your HEAD tags
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">