How to reload a page using JavaScript

1107
votes

How can I reload the page using JavaScript?

I need a method that works in all browsers.

19
javascriptreload

19 Answers

1114
votes

JavaScript 1.2

window.location.reload(false); 
// If we needed to pull the document from
//  the web-server again (such as where the document contents
//  change dynamically) we would pass the argument as 'true'.

JavaScript 1.1

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

JavaScript 1.0

window.location.href = window.location.pathname + window.location.search + window.location.hash;
// creates a history entry
584
votes
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;
284
votes

Here are 535 ways to reload the page using JavaScript, the easiest being location = location.

These are the first 50:

location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
location = self.location.href
location = location['href']
location = window['location']
location = window['location'].href
location = window['location']['href']
location = window.location['href']
location = self['location']
location = self['location'].href
location = self['location']['href']
location = self.location['href']
location.assign(location)
location.replace(location)
window.location.assign(location)
window.location.replace(location)
self.location.assign(location)
self.location.replace(location)
location['assign'](location)
location['replace'](location)
window.location['assign'](location)
window.location['replace'](location)
window['location'].assign(location)
window['location'].replace(location)
window['location']['assign'](location)
window['location']['replace'](location)
self.location['assign'](location)
self.location['replace'](location)
self['location'].assign(location)
self['location'].replace(location)
self['location']['assign'](location)
self['location']['replace'](location)
location.href = location
location.href = location.href
location.href = window.location
location.href = self.location
location.href = window.location.href
location.href = self.location.href
location.href = location['href']
location.href = window['location']
location.href = window['location'].href
location.href = window['location']['href']
location.href = window.location['href']
location.href = self['location']
location.href = self['location'].href
location.href = self['location']['href']
location.href = self.location['href']
...
103
votes

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.

94
votes

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.

76
votes

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.

53
votes

This works for me:

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

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

48
votes

To reload a page using JavaScript, use:

window.location.reload();
18
votes

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.

11
votes
location.href = location.href;
10
votes

Shortest (more)

history.go()
8
votes

To make it easy and simple, use location.reload(). You can also use location.reload(true) if you want to grab something from the server.

8
votes

Using a button or just put it inside an "a" (anchor) tag:

<input type="button" value="RELOAD" onclick="location.reload();" />

Try these for other needs:

Location Objects has three methods --

assign() Used to load a new document
reload() Used to reloads the current document.
replace() Used to replace the current document with a new one
6
votes

Automatic reload page after 20 seconds.

<script>
    window.onload = function() {
        setTimeout(function () {
            location.reload()
        }, 20000);
     };
</script>
5
votes

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()
5
votes

Use this button to refresh the page

DEMO

<input type="button" value="Reload Page" onClick="document.location.reload(true)">
4
votes

Thank you, this post was very helpful, not only to reload the page with the suggested answer, but also as well to give me the idea to place a jQuery UI icon to a button:

<button style="display:block; vertical-align:middle; height:2.82em;"
        title="Cargar nuevamente el código fuente sin darle un [Enter] a la dirección en la barra de direcciones"
        class="ui-state-active ui-corner-all ui-priority-primary" 
        onclick="javascript:window.location.reload(true);">
    <span style="display:inline-block;" class="ui-icon ui-icon-refresh"></span>
    &nbsp;[<b>CARGAR NUEVAMENTE</b>]&nbsp;
</button>

Edited to show how this looks like when included in a project

2016-07-02

My apologies as this is a personal project that implies using jQuery UI, Themeroller, Icons framework, methods like jQuery tabs, but it's in Spanish ;)

0
votes

I posted an Question about the answer from @Lekensteyn Why return false after location.reload() using onclick?

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

location.reload();
return false;

I got this answear from @iota which explained pretty well, why you would need to do it: So i post it here, hope it helps someone which also wounder why you need to do it.

If the event listener is attached to a link, then clicking the link will result in going to another page instead of reloading the page. return false will prevent the default action in an inline event handler and the onclick property.

Without return false:

 
     document.querySelector('a').onclick = function() {
      location.reload();
     }
 
 
    <a href="https://www.example.com">Click</a>

With return false:

 
     console.log('Loaded', new Date);
     document.querySelector('a').onclick = function() {
       location.reload();
       return false;
     }
 
     <a href="https://www.example.com">Click</a>
-3
votes

You can simply use 

window.location=document.URL

where document.URL gets the current page URL and window.location reloads it.