12

In my web application I am setting window.location to navigate to a different page, but for some reason Firefox shows an old version of that page.

Using Firebug I detected that the browser doesn't even send an HTTP request, it simply uses an older version of that page (not even the last one) and displays it.

The page itself has all the usual headers to prevent caching which works perfectly when I browse my pages using links or manual input. The problem only occurs when seting window.location.

Is this a Firefox problem or something to expect from any browser? Can this behaviour be changed?

Community
  • 1
  • 1
Daniel Rikowski
  • 66,219
  • 52
  • 237
  • 318

5 Answers5

31

You could just add a random parameter to the page URL in order to have the browser issue a new request.

So instead of using 

 window.location = "my.url/index.html";

use

 window.location = "my.url/index.html?nocache=" + (new Date()).getTime();
Sirko
  • 65,767
  • 19
  • 135
  • 167
  • The good old cache buster :) I'm using it right now, but I'm also interested in some background info, like if this is the designed behaviour of `window.location` or if I'm doing something wrong here. – Daniel Rikowski Jan 07 '13 at 13:53
  • If your page was served with http headers that say not to cache the page I don't think it would be chached. But if it isn't served with "no cache" headers it is a good behavior to cache it as much as possible to save bandwith. Cahcning may occur both in the users browser and in various internet equipment such as proxies. A better way would thus be to control the caching of the page. But the "cache buster" is the easy way... – mortb Jan 07 '13 at 13:57
5

You can use location.reload with a true argument, which will always bypass the cache.

window.location.reload(true);
Nick Bray
  • 1,865
  • 12
  • 18
0

Add some time specific or random querystring value to the url. This will force the page to be reloaded.

var yourNewLoc = "http://newlocation.com/";
document.location = yourNewLoc + "?c=" + (new Date()).valueOf();
mortb
  • 7,874
  • 3
  • 21
  • 38
0

You have to validate if there is any existing query parameter in the url. If any query parameter exist, you should append the timestamp using "&". I have written a quick snippet that might be of your help.

window.newLocation = function( location ) {
    var newLocation = ( typeof location === "string" ) ? location : window.location.href,
       appendType = ( newLocation.indexOf("?") < 0 ) ? "?" : "&";
    window.location = newLocation + appendType + "_t=" + (new Date()).getTime();
}

Usage:

newLocation("index.html") or window.newLocation("index.html") 
// opens "index.html?_t=<timstamp>"

newLocation("index.html?existingQuery=true") or window.newLocation("index.html?existingQuery=true") 
// opens "index.html?existingQuery=true&_t=<timstamp

newLocation() or window.newLocation() 
// opens existing window location with a timestamp

You could further modify the snippet to remove exiting timestamp in the query parameter to avoid duplication

nairvijays
  • 191
  • 8
0

just need to tell your download function (in the controller, in case of Laravel) do not cache it by setting the headers, used the following code for Laravel:

$headers =[
            'Content-Type' => 'application/text',
            'Cache-Control' => 'no-store, no-cache, must-revalidate, max-age=0',
            'Cache-Control' => 'post-check=0, pre-check=0, false',
             'Pragma' => 'no-cache',  ];
return response()->file($pathToFile, $headers);

This code is very much true for PhP as well just need transferring the code accordingly. By adding new dates may invalidate a link especially if you are using a temporarySignedLink etc.

Cheers

zaffar
  • 481
  • 5
  • 12