Home » Javascript » window.location.reload with clear cache

window.location.reload with clear cache

Posted by: admin November 30, 2017 Leave a comment

Questions:

I want to reload a page using JavaScript but I want to clear cache too, so on page refresh the page has latest versions of everything from server.
Other browsers except IE are not getting latest content.

Any solution for IE9?

Answers:

reload() is supposed to accept an argument which tells it to do a hard reload, ie, ignoring the cache:

location.reload(true);

I can’t vouch for its reliability, you may want to investigate this further.

Questions:
Answers:

You can do this a few ways. One, simply add this meta tag to your head:

<meta http-equiv="Cache-control" content="no-cache">

If you want to makes sure stuff that was already cached get’s erased also the expires meta tag should work to delete it by setting it to -1 like so:

<meta http-equiv="Expires" content="-1">

http://www.metatags.org/meta_http_equiv_cache_control

Also, IE should give you the latest content for the main page. If you are having issues with external documents, like CSS and JS add a dummy param at the end of your URLs with the current time in milliseconds so that its never the same. This way IE, and other browsers, will ALWAYS serve you the latest version. Here is an example:

<script src="mysite.com/js/myscript.js?12345">

–UPDATE–

After reading the comments I realize you wanted to programmatically erase the cache and not every time. What you could do is have a function in JS like:

eraseCache(){
  window.location = window.location.href+'?eraseCache=true';
}

Then, in PHP let’s say, you do something like this:

<head>
<?php
  $cache = '';
  if(isset($_GET['eraseCache'])){
    echo '<meta http-equiv="Cache-control" content="no-cache">';
    echo '<meta http-equiv="Expires" content="-1">';
    $cache = '?'.time();
  }
?>
<!-- ... other head HTML -->
<script src="mysite.com/js/script.js<?= $cache ?>"
</head>

This isn’t tested, but should work. Basically, your JS function, if invoked, will reload the page, but add a GET param to the end of the URL. Your site would then have some backend code that looks for this param. If it exists it adds the meta tags and a cache var that contains a timestamp and appends it to the scripts and CSS that you are having caching issues with.

–UPDATE 2–

The meta tag indeed wont erase the cache ON LOAD. So, technically youd need to run the eraseCache function in JS, once the page loads, youd need to load it AGAIN for the changes to take place. You should be able to fix this with your server side language. You could run the same eraseCache JS command, but instead of adding the meta tags run this at the top of your page instead:

<?php
  header("Cache-Control: no-cache, must-revalidate");
  header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
?>
<!-- Here you'd start your page... -->

This way works because it erases the cache before the page loads and before anything is run.

Questions:
Answers:

i had this problem and i solved it using javascript

 location.reload(true);

you may also use

window.history.forward(1);

to stop the browser back button after user logs out of the application.

Questions:
Answers:

I wrote this javascript script and included it in the header (before anything loads). It seems to work. If the page was loaded more than one hour ago or the situation is undefined it will reload everything from server.
The time of one hour = 3600000 milliseconds can be changed in the following line:
if(alter > 3600000)

With regards,
Birke

<script type="text/javascript">
//<![CDATA[
function zeit()
{
    if(document.cookie)
    {
        a = document.cookie;
        cookiewert = "";
        while(a.length > 0)
        {
            cookiename = a.substring(0,a.indexOf('='));
            if(cookiename == "zeitstempel")
            {
                cookiewert = a.substring(a.indexOf('=')+1,a.indexOf(';'));
                break;
            }
            a = a.substring(a.indexOf(cookiewert)+cookiewert.length+1,a.length);
        }
        if(cookiewert.length > 0)
        {
            alter = new Date().getTime() - cookiewert;

            if(alter > 3600000)
            {   
                document.cookie = "zeitstempel=" + new Date().getTime() + ";";
                location.reload(true);
            }
            else
            {
                return;
            }
        }
        else
        {
            document.cookie = "zeitstempel=" + new Date().getTime() + ";";
            location.reload(true);
        }
    }
    else
    {
        document.cookie = "zeitstempel=" + new Date().getTime() + ";";
        location.reload(true);
    }
}
zeit();
//]]>
</script>

Questions:
Answers:

Cache.delete() can also be used to clear cache for latest chrome, firefox and opera browser.

Questions:
Answers:

In my case reload() doesn’t work because the asp.net controls behavior. So, to solve this issue I’ve used this approach, despite seems a work around.

self.clear = function () {
    //location.reload(true); Doesn't work to IE neither Firefox;
    //also, hash tags must be removed or no postback will occur.
    window.location.href = window.location.href.replace(/#.*$/, '');
};