1343

How can I reload the page using JavaScript?

I need a method that works in all browsers.

Braiam
  • 1
  • 11
  • 47
  • 78
Resh
  • 13,439
  • 3
  • 15
  • 3

13 Answers13

1405

JavaScript 1.2 and newer

Short version:

location.reload();

Long version (identical to the short version):

window.location.reload();

Some browsers support an optional boolean parameter that will forcibly clear the cache (similar to Ctrl+Shift+R), but this is nonstandard and poorly supported and documented and should generally not be used:

//Force a hard reload to clear the cache if supported by the browser
window.location.reload(true);

JavaScript 1.1

window.location.replace(window.location.pathname + window.location.search + window.location.hash);
// does not create a history entry

JavaScript 1.0

window.location.href = window.location.pathname + window.location.search + window.location.hash;
// creates a history entry
Pikamander2
  • 7,332
  • 3
  • 48
  • 69
gianebao
  • 17,718
  • 3
  • 31
  • 40
  • 19
    It looks like `location.reload(forceReload: boolean)` is deprecated now (just the `true`/`false` parameter), though it might still work. – Andrew Mar 12 '21 at 15:48
  • As far as I know, it never was part of any specification. To force reloading (bypassing the cache), adding a random parameter which is not used otherwise to the URL as a dirty solution will work. Maybe something like `nocache=' + (new Date()).getTime()`. – StanE Jan 13 '23 at 14:08
654
location.reload();

See this MDN page for more information.

If you are refreshing after an onclick then you'll need to return false directly after

location.reload();
return false;
Fil
  • 8,225
  • 14
  • 59
  • 85
Lekensteyn
  • 64,486
  • 22
  • 159
  • 192
  • 45
    what is the difference between `location.reload()` and `window.location.reload()` ? – Raptor Dec 20 '13 at 04:29
  • 87
    @ShivanRaptor Usually none, in web browsers context, `location` is the same as `window.location` as `window` is the global object. – Lekensteyn Dec 20 '13 at 09:48
  • 1
    don't forget to `return false;` if calling this from an onclick in a link. – Rimian Dec 27 '18 at 21:56
  • 33
    I prefer to use `window.location.reload();` for readability, as `location` could be a local variable - whereas you'd usually avoid variables of the name `window`. – Yeti Jan 07 '20 at 10:30
  • 4
    @Rimian - IMHO, `return false;` is not strictly necessary in a handler: doesn't `reload` supersede any further processing? – ToolmakerSteve Aug 29 '20 at 01:05
  • 5
    Why would you need to return false afterwards? – Tedious Mar 01 '21 at 19:02
  • 3
    The question of _"Why would you need to return `false` afterwards?"_ is currently open for speculation in [this post: "Why you need to return false after location.reload() with onclick?"](https://stackoverflow.com/questions/67328296/why-you-need-to-return-false-after-location-reload-with-onclick) – Alexander Nied Apr 30 '21 at 13:42
166

I was looking for some information regarding reloads on pages retrieved with POST requests, such as after submitting a method="post" form.

To reload the page keeping the POST data, use:

window.location.reload();

To reload the page discarding the POST data (perform a GET request), use:

window.location.href = window.location.href;

Hopefully this can help others looking for the same information.

starwarswii
  • 2,187
  • 1
  • 16
  • 19
114

You can perform this task using window.location.reload();. As there are many ways to do this but I think it is the appropriate way to reload the same document with JavaScript. Here is the explanation

JavaScript window.location object can be used

  • to get current page address (URL)
  • to redirect the browser to another page
  • to reload the same page

window: in JavaScript represents an open window in a browser.

location: in JavaScript holds information about current URL.

The location object is like a fragment of the window object and is called up through the window.location property.

location object has three methods:

  1. assign(): used to load a new document
  2. reload(): used to reload current document
  3. replace(): used to replace current document with a new one

So here we need to use reload(), because it can help us in reloading the same document.

So use it like window.location.reload();.

Online demo on jsfiddle

To ask your browser to retrieve the page directly from the server not from the cache, you can pass a true parameter to location.reload(). This method is compatible with all major browsers, including IE, Chrome, Firefox, Safari, Opera.

sg7
  • 6,108
  • 2
  • 32
  • 40
Nikhil Agrawal
  • 26,128
  • 21
  • 90
  • 126
  • 2
    Ah ha! `replace()` turned out to be the solution I was looking for because I needed to reload my page with a slight change in the query string. – Bernard Hymmen Jul 01 '15 at 00:01
  • 3
    From w3schools: "The difference between assign() and replace(), is that replace() removes the URL of the current document from the document history, meaning that it is not possible to use the "back" button to navigate back to the original document." – pasaba por aqui Nov 11 '18 at 15:30
84

Try:

window.location.reload(true);

The parameter set to 'true' reloads a fresh copy from the server. Leaving it out will serve the page from cache.

More information can be found at MSDN and in the Mozilla documentation.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Orane
  • 2,223
  • 1
  • 20
  • 33
  • 1
    what if I want to refresh an external web page www.xyz.com/abc ? – DoIt Jan 05 '15 at 19:42
  • @Dev: You should try with "replace" as mentioned later on –  Mar 30 '17 at 06:25
  • @Orane: I like both the simplicity and resourcefulness of this answer particularly, as to give many options just to satisfy the op's inquiry, that said, thank you for providing an authority referenced link in this situation as well, for future reference as each browser have their own JS engine for rendering...I think that the question is very general and that it should depend on what do you want do that for, because else web reference: "http://www.phpied.com/files/location-location/location-location.html" might satisfy completely the op for this question. However, this one helped me ;) –  Mar 30 '17 at 06:25
  • 5
    Is this still true? Both of those links don't mention any parameter for reload. – Rüdiger Schulz Feb 24 '20 at 17:14
  • 12
    the second ( true ) parameter is deprecated – nick Sep 14 '20 at 14:09
55

This works for me:

function refresh() {    
    setTimeout(function () {
        location.reload()
    }, 100);
}

http://jsfiddle.net/umerqureshi/znruyzop/

Umer Qureshi
  • 1,736
  • 2
  • 20
  • 22
  • This, to me, is preferable, as it avoids a loop condition on the server-side – ILMostro_7 Dec 29 '15 at 15:29
  • 1
    I particularly appreciate the inclusion of the timeout function because I have a message I still want viewed before the refresh happens. Kudos! – Matt Cremeens Nov 11 '16 at 15:02
  • you can set different values as a second argument to the setTimeout function but it will doesn`t work, reload will occurs immediatily, how to solve it? – O.Kuz Dec 13 '19 at 09:38
  • 2
    @O.Kuz don't think so. lets say if you set the value to 5000ms then reload will occur after 5 seconds. see http://jsfiddle.net/umerqureshi/znruyzop/446/ – Umer Qureshi Dec 13 '19 at 09:57
50

To reload a page using JavaScript, use:

window.location.reload();
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Girish Ninama
  • 583
  • 4
  • 8
19

If you put 

window.location.reload(true);

at the beginning of your page with no other condition qualifying why that code runs, the page will load and then continue to reload itself until you close your browser.

Joe Devlin
  • 207
  • 2
  • 2
  • Well, or until you open another URL. It probably depends on the browser's ability to handle continuous page (re)loads. – adamdunson Mar 01 '13 at 04:40
  • well that depends of where you place it as you have correctly stated. We are referring here merely that perhaps an anchor tag is not the intuitive element to execute an action such as reloading the page. Suggestion: We such rely on another UI object as target to do an onclick event. You can do this in jQuery after the page is loaded by targetting a div, for example if you decorate it with css.. It depends on what you want to do with it. In that context a button rather than an input type button.if we are not planning on passing an argument to backend app it seems more appropriate. –  Jul 02 '16 at 17:38
  • IE: –  Jul 02 '16 at 17:39
14
location.href = location.href;
zb226
  • 9,586
  • 6
  • 49
  • 79
guilin 桂林
  • 17,050
  • 29
  • 92
  • 146
  • 8
    Modern browsers ignore this because the href does not change so there is no need to reload it. You should use this only as failover for old browsers without reload: (location.reload ? location.reload() : location.href = location.href) – Radek Pech Sep 18 '14 at 09:38
  • 2
    @RadekPech Which older browsers don't have `location.reload()`? – Matthias Jan 21 '19 at 22:48
12

Shortest (more)

history.go()
Community
  • 1
  • 1
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
  • How does this effect post/form data? like with 'window.location.reload(true);' (keep data) and 'window.location.href = window.location.href;' (discard data) – tcables Nov 02 '22 at 19:48
8

This should work:

window.location.href = window.location.href.split( '#' )[0];

or

var x = window.location.href;
x = x.split( '#' );
window.location.href = x[0];

I prefer this for the following reasons:

  • Removes the part after the #, ensuring the page reloads on browsers that won't reload content that has it.
  • It doesn't ask you if want to repost last content if you recently submit a form.
  • It should work even on most recent browsers. Tested on Lasted Firefox and Chrome.

Alternatively, you may use the most recent official method for this task

window.location.reload()
Ayoola Falola
  • 81
  • 1
  • 2
1

you can use this code:

window.location.reload();
OmidDarvishi
  • 558
  • 4
  • 8
0

The Javascript reload() method is used to reload the current document or URL. The javascript location.reload(true) method work just like reload button in your browser. By default, the JS reload() method reloads the page from the cache, however you may force it to reload the page from the server side by setting the forceGet parameter to true: location. reload(true). Source: https://www.coderepublics.com/JavaScript/javascript-location-reload-true.php

What about Depricated? It is only the reload with forcedReload which is now deprecated. But to avoid depricated error you can use location.reload() without the forceReload flag.

Kuldeep Bisht
  • 43
  • 8
  • I need a method that works in all browsers. So location.reload(true) is a bad approach AMO https://developer.mozilla.org/en-US/docs/Web/API/Location/reload – tatactic Nov 13 '22 at 23:55