275

How can I force the web browser to do a hard refresh of the page via JavaScript?
Hard refresh means getting a fresh copy of the page AND refresh all the external resources (images, JavaScript, CSS, etc.).

4
  • I strongly recommend accepting a different answer. See the comments and the note I added at the top.
    – Inigo
    Commented Dec 16, 2022 at 9:37
  • No fault of this question, but it was 13yrs ago, and many of the solutions proposed don't work across all platforms.
    – Ben in CA
    Commented Mar 15, 2023 at 16:31
  • 1
    I added a bounty, but still not getting any updated relevant answers. Is there really nothing in web standards to achieve such a "simple" task?
    – Ben in CA
    Commented Mar 22, 2023 at 19:30
  • New answers have been added to this answer since the current Best Answer was selected. Please consider switching to one of the newer answers if they are a better choice for Best Answer, to keep the question up to date. Also consider upvoting any answer that you feel provides very helpful information, even if is not the Best Answer.
    – crashwap
    Commented Feb 13 at 20:39

10 Answers 10

401

⚠️ This solution won't work on all browsers. MDN page for location.reload():

Note: Firefox supports a non-standard forceGet boolean parameter for location.reload(), to tell Firefox to bypass its cache and force-reload the current document. However, in all other browsers, any parameter you specify in a location.reload() call will be ignored and have no effect of any kind.

Try:

location.reload(true);

When this method receives a true value as argument, it will cause the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.

More info:

6
  • 27
    I am pretty sure this won't reload all external resources. You would have to read through all the a, link, script and img elements and append a random query string to the end of each external reference after the hard reload. Or, do that on the server. Commented Jan 20, 2010 at 5:39
  • 9
    Did it work in 2010 ? It sure doesn't work in 2018 (in Chrome). Chrome loads everything (except /Home/Index) from cache. It appears to be working in firefox WTH ? Commented Feb 23, 2018 at 15:30
  • 1
    @MaciejSzpakowski Using Cache.keys() and Cache.delete() worked for me. Example: jsfiddle
    – r.delic
    Commented Mar 17, 2018 at 0:02
  • But whenever we force reload , there comes an alert asking "are you sure you want to reload?, is there a way to overide that alert and reload the page?
    – Gina Gina
    Commented Jul 24, 2018 at 5:21
  • 1
    this doesn't seem to work on chrome but this window.location.href=window.location.href worked for me
    – Ivan
    Commented Jul 16, 2019 at 11:08
14
+50

Accepted answer above no longer does anything except just a normal reloading on mostly new version of web browsers today. I've tried on my recently updated Chrome all those, including location.reload(true), location.href = location.href, and <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />. None of them worked.

My solution is by using server-side capability to append non-repeating query string to all included source files reference as like below example.

<script src="script.js?t=<?=time();?>"></script>

So you also need to control it dynamically when to keep previous file and when to update it. The only issue is when files inclusion is performed via script by plugins you have no control to modify it. Don't worry about source files flooding. When older file is unlinked it will be automatically garbage collected.

6
  • 1
    i am also having hard time looking for a cache busting solution for my react app and on front end nothing seems to work , do you find any solution yet apart from modifying resources from the server ?
    – Mohd Maaz
    Commented Jul 17, 2022 at 6:50
  • These are usual cases for server side caching, like for example cloudflare caching. Where scripts and assets are being cached on their end. In such cases only you need above method. Commented Mar 22, 2023 at 7:52
  • 1
    No fault of the poster, but this isn't ideal, and I was hoping in 2023 there's a "simple" way of forcing a refresh - but I didn't get any better answers when I posted a bounty, so awarding it to you.
    – Ben in CA
    Commented Mar 22, 2023 at 19:38
  • I like that you shared your solution. Please be clear your solution contains PHP since it is an extra introduced language which was not mentioned before. Commented Dec 22, 2023 at 23:55
  • 1
    My solution that works is to add a query param of a file version e.g. ?v=202405201330 - I use the date of the file in the YYYYMMDDHHMM notation, and the date equals to merge date. This is a bit manual though, but gives me control over versioning. Commented May 20 at 12:07
11

This is a 2022 update with 2 methods, considering SPA's with # in url:

METHOD 1:

As mentioned in other answers one solution would be to put a random parameter to query string. In javascript it could be achieved with this:

function urlWithRndQueryParam(url, paramName) {
    const ulrArr = url.split('#');
    const urlQry = ulrArr[0].split('?');
    const usp = new URLSearchParams(urlQry[1] || '');
    usp.set(paramName || '_z', `${Date.now()}`);
    urlQry[1] = usp.toString();
    ulrArr[0] = urlQry.join('?');
    return ulrArr.join('#');
}

function handleHardReload(url) {
    window.location.href = urlWithRndQueryParam(url);
    // This is to ensure reload with url's having '#'
    window.location.reload();
}

handleHardReload(window.location.href);

The bad part is that it changes the current url and sometimes, in clean url's, it could seem little bit ugly for users.

METHOD 2:

Taking the idea from https://splunktool.com/force-a-reload-of-page-in-chrome-using-javascript-no-cache, the process could be to get the url without cache first and then reload the page:

async function handleHardReload(url) {
    await fetch(url, {
        headers: {
            Pragma: 'no-cache',
            Expires: '-1',
            'Cache-Control': 'no-cache',
        },
    });
    window.location.href = url;
    // This is to ensure reload with url's having '#'
    window.location.reload();
}

handleHardReload(window.location.href);

Could be even combined with method 1, but I think that with headers should be enought:

async function handleHardReload(url) {
    const newUrl = urlWithRndQueryParam(url);
    await fetch(newUrl, {
        headers: {
            Pragma: 'no-cache',
            Expires: '-1',
            'Cache-Control': 'no-cache',
        },
    });
    window.location.href = url;
    // This is to ensure reload with url's having '#'
    window.location.reload();
}

handleHardReload(window.location.href);
8
  • Hey Miquel. This is probably a really stupid question, but what exact url and paramName am I passing to this function? Is it just my current url? Thanks! Is the url just windoiw.location.href, or do I have to split it or adjust it at all? Commented Sep 28, 2022 at 12:47
  • url is the url you want to update query parameter, and paramname is the parameter you want to update. For instance, if you call urlWithRndQueryParam('https://google.com/whatever?_z=1234/#/start', '_z') you'll get 'https://google.com/whatever?_z=83234/#/start'. Just try it in stackblitz
    – Miquel
    Commented Sep 28, 2022 at 13:53
  • Miquel, sadly it seems like these methods won't hard refresh the CSS like the actual Google commands behave. Any advice on some possible solutions? Perhaps I'm implementing your methods incorrectly. Commented Oct 10, 2022 at 16:48
  • 1
    mmm @OldsDiesel this is quite strange, precisely pragma and cache-control are the headers that controls cache behavior in both sides (client and server). Could you check if you see in devtools the background request with these headers and which is the result? If the result is the non cached one, it is working fine, it might be a problem of reloading. Otherwise it could be that the fetch request is not being sent. Please note that you should wait handleHardReload to finish: await handleHardReload(window.location.href)
    – Miquel
    Commented Oct 10, 2022 at 17:05
  • 1
    For css you could try to dynamically load css scripts with a script in header that adds the random time parameter, the idea could be to have an array with the scripts you want to load and inject them directly with document.createElement and document.body.appendChild
    – Miquel
    Commented Oct 10, 2022 at 17:07
9
window.location.href = window.location.href
3
  • 27
    This will not pull the page from the server if the browser has it cached.
    – LukeP
    Commented Apr 7, 2020 at 20:42
  • 5
    Please add some explanation to your answer such that others can learn from it
    – Nico Haase
    Commented Jan 20, 2021 at 16:58
  • Doesn't work on desktop nor or mobile browsers in 2024. Commented May 9 at 15:23
7

Changing the current URL with a search parameter will cause browsers to pass that same parameter to the server, which in other words, forces a refresh.

(No guarantees if you use intercept with a Service Worker though.)

  const url = new URL(window.location.href);
  url.searchParams.set('reloadTime', Date.now().toString());
  window.location.href = url.toString();

If you want support older browsers:

if ('URL' in window) {
  const url = new URL(window.location.href);
  url.searchParams.set('reloadTime', Date.now().toString());
  window.location.href = url.toString();
} else {
  window.location.href = window.location.origin 
    + window.location.pathname 
    + window.location.search 
    + (window.location.search ? '&' : '?')
    + 'reloadTime='
    + Date.now().toString()
    + window.location.hash;
}

That said, forcing all your CSS and JS to refresh is a bit more laborious. You would want to do the same process of adding a searchParam for all the src attributes in <script> and href in <link>. That said it won't unload the current JS, but would work fine for CSS.

document.querySelectorAll('link').forEach((link) => link.href = addTimestamp(link.href));

I won't bother with a JS sample since it'll likely just cause problems.

You can save this hassle by adding a timestamp as a search param in your JS and CSS links when compiling the HTML.

5
  • This do an endless loop of refresh on current page. Commented Sep 5, 2022 at 20:10
  • 1
    Sounds like you're running it on script load instead of invoking it within a function. At least that shows it works.
    – ShortFuse
    Commented Sep 5, 2022 at 20:26
  • It need an if. Se my answer: stackoverflow.com/a/73683077/12690348 Commented Sep 11, 2022 at 22:44
  • You answer has refresh() being called on script load. That's why it's doing an endless loop. You coded it to refresh on load.
    – ShortFuse
    Commented Sep 14, 2022 at 16:56
  • Thank you, I append this to my answer: It do no endless loop because of the if-statement described. The refresh() function can be called by a button or other conditioned ways instead of page load. Commented Sep 18, 2022 at 8:28
4

UPDATED to refresh all the external resources (images, JavaScript, CSS, etc.)

Put this in file named HardRefresh.js:

  function hardRefresh() {
    const t = parseInt(Date.now() / 10000); //10s tics
    const x = localStorage.getItem("t");
    localStorage.setItem("t", t);

    if (x != t) location.reload(true) //force page refresh from server
    else { //refreshed from server within 10s
      const a = document.querySelectorAll("a, link, script, img")
      var n = a.length
      while(n--) {
        var tag = a[n]
        var url = new URL(tag.href || tag.src);
        url.searchParams.set('r', t.toString());
        tag.href = url.toString(); //a, link, ...
        tag.src = tag.href; //rerun script, refresh img
      }
    }
  }

  window.addEventListener("DOMContentLoaded", hardRefresh);
  window.addEventListener("deviceorientation", hardRefresh, true);

This code do a fully controled forced hard refresh for every visitor, so that any update will show up without a cashing problem.

Duplicated DOM rendering is not a performance issue, because the first render is from cache and it stops rendering in <script src="js/HardRefresh.js"> where it reload a page from server. When it run a refreshed page it also refresh urls in page.

The last refresh time x is stored in localStorage. It is compared with the current time t to refresh within 10 seconds. Assuming a load from server not take more than 10 sec we manage to stop a page refresh loop, so do not have it less than 10s.

For a visitor of page the x != t is true since long time ago or first visit; that will get page from server. Then diff is less than 10s and x == t, that will make the else part add query strings to href and src having sources to refresh.

The refresh() function can be called by a button or other conditioned ways. Full control is managed by refining exclusion and inclusion of urls in your code.

6
  • While this does produce "mypage.com/page?r=166821181", my page still uses cached images. Is there something else I can do?
    – David.P
    Commented Nov 12, 2022 at 0:10
  • 1
    @David.P Code is now updated by set href with new query string and it will then reload. Client updates also .js and .css files! Commented Dec 11, 2022 at 4:55
  • uncaught typeerror failed to construct 'url' invalid url Commented Mar 31, 2023 at 12:04
  • Try simplify! Force page refresh from server seem not to be needed. Remove the if. Change document.querySelectorAll("a, link, script, img") to document.querySelectorAll("a"). For css, js and resources you can use a minimal dynamic loader with query. Commented Apr 4, 2023 at 9:45
  • Doesn't work on desktop nor or mobile browsers in 2024. Commented May 9 at 15:16
3

For angular users and as found here, you can do the following:

<form [action]="myAppURL" method="POST" #refreshForm></form>
import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  // ...
})
export class FooComponent {
  @ViewChild('refreshForm', { static: false }) refreshForm: ElementRef<HTMLFormElement>;

  forceReload() {
    this.refreshForm.nativeElement.submit();
  }
}

explanation: Angular

Location: reload(), The Location.reload() method reloads the current URL, like the Refresh button. Using only location.reload(); is not a solution if you want to perform a force-reload (as done with e.g. Ctrl + F5) in order to reload all resources from the server and not from the browser cache. The solution to this issue is, to execute a POST request to the current location as this always makes the browser to reload everything.

Not using Angular

Apparently, "Fetching the file by post does clear the cached file and it seems to work in any browser"

So using "he fetch api with POST" should also work

2
  • Thank you! Thank you! I have tried all the other client side solutions and none worked to hard refresh a .wasm file! But your did (I did not use angular, I used the fetch api with POST)! Fetching the file by post does clear the cached file and it seems to work in any browser. :)
    – RandomGuy
    Commented Aug 25, 2023 at 10:19
  • 1
    You're welcome ;) I've updated my answer to add the information you gave me Commented Aug 25, 2023 at 12:08
2

The accepted answer location.reload(true); DOES NOT WORK. Here's why (taken directly from the MDN page):

Note: Firefox supports a non-standard forceGet boolean parameter for location.reload(), to tell Firefox to bypass its cache and force-reload the current document. However, in all other browsers, any parameter you specify in a location.reload() call will be ignored and have no effect of any kind.

You may, though, come across instances of location.reload(true) in existing code that was written with the assumption the force-reload effect occurs in all browsers. A GitHub "location.reload(true)" search returns several hundred thousand results. So there's a lot of existing code which has it.

The history of it is: some version of Netscape Navigator added support for it, which apparently eventually got picked up in Firefox. And at one point the W3C Web APIs Working Group took up an issue to consider adding it to the specification for location.reload(). However, it was never actually added.

So a boolean parameter is not part of the current specification for location.reload() — and in fact has never been part of any specification for location.reload() ever published.

Source: https://developer.mozilla.org/en-US/docs/Web/API/Location/reload

So, how to force a hard refresh? Two ideas:

  1. Use query strings, as suggested/explained/demoed in multiple other answers in this thread;

  2. Flood the W3C with requests.
    https://www.w3.org/Consortium/contact

(Had suggestion #2 been widely adopted years ago, we could have stopped using the query string hack years ago.)

1
  • Does the query string method "flush" any cached JS content of a React SPA? Unless the file is named differently by webpack I suppose.
    – Ben in CA
    Commented Mar 22, 2023 at 19:28
2

The location.reload(true) is deprecated so there is no direct option to hard reload but we can still manually clear the cache and then reload. Use this custom function instead.

export const clearCache =  (reloadAfterClear = true) => {
    if('caches' in window){
        caches.keys().then((names) => {
            names.forEach(async (name) => {
                await caches.delete(name)
            })
        })

        if(reloadAfterClear)
            window.location.reload()
    }
}

If you don't want to refresh immidiately and just clear the cache, use clearCache(false)

Hope it helps as none of the above options worked for me.

1
  • Doesn't work on desktop nor or mobile browsers. Commented May 9 at 15:14
0

The most reliable way I've found is to use a chache buster by adding a value to the querystring.

Here's a generic routine that I use:

    function reloadUrl() {

        // cache busting: Reliable but modifies URL
        var queryParams = new URLSearchParams(window.location.search);
        queryParams.set("lr", new Date().getTime());        
        var query = queryParams.toString();                
        window.location.search = query;  // navigates
    }

Calling this will produce something like this:

https://somesite.com/page?lr=1665958485293

after a reload.

This works to force reload every time, but the caveat is that the URL changes. In most applications this won't matter, but if the server relies on specific parameters this can cause potential side effects.

5
  • While this does produce "mypage.com/page?lr=1665958485293", my page still uses cached images. What to do now?
    – David.P
    Commented Nov 11, 2022 at 23:34
  • Does this method "flush" any cached JS content of a React SPA?
    – Ben in CA
    Commented Mar 22, 2023 at 19:26
  • 1
    @David.P ... that's because the images are their own resources with their own URLs. You'd have to parse all the images in the document, and also add randomizers to their URLs as well. Something akin to Dan Frodberg's answer above.
    – eidylon
    Commented Apr 11, 2023 at 18:36
  • Thanks. Some time ago I found an easy JavaScript method that hard reloads all images after the page has loaded. I shall post that method here as soon as I get around to look it up.
    – David.P
    Commented Apr 12, 2023 at 21:43
  • Doesn't work on desktop nor or mobile browsers in 2024. Commented May 9 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.