How to reload a page using JavaScript

How can I reload the page using JavaScript?

I need a method that works in all browsers.

18 Answers 18

See this MDN page for more information.

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

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

These are the first 50:

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.

How can I refresh a page with jQuery?

How can I refresh a page with jQuery?

28 Answers 28

The reload() function takes an optional parameter that can be set to true to force a reload from the server rather than the cache. The parameter defaults to false , so by default the page may reload from the browser’s cache.

There are multiple unlimited ways to refresh a page with JavaScript:

1. location.reload()
2. history.go(0)
3. location.href = location.href
4. location.href = location.pathname
5. location.replace(location.pathname)

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 .

You can continue the list being creative:

• window.location = window.location
• window.self.window.self.window.window.location = window.location
• . and other 534 ways

This should work on all browsers even without jQuery:

Lots of ways will work, I suppose:

• window.location.reload();
• history.go(0);
• window.location.href=window.location.href;

To reload a page with jQuery, do:

The approach here that I used was Ajax jQuery. I tested it on Chrome 13. Then I put the code in the handler that will trigger the reload. The URL is «» , which means this page.

If the current page was loaded by a POST request, you may want to use

because window.location.reload() will prompt for confirmation if called on a page that was loaded by a POST request.

The question should be,

How to refresh a page with JavaScript

You’re spoiled for choice.

You may want to use

forceGet is a boolean and optional.

The default is false which reloads the page from the cache.

Set this parameter to true if you want to force the browser to get the page from the server to get rid of the cache as well.

if you want quick and easy with caching.

Three approaches with different cache-related behaviours:

location.reload(true)

In browsers that implement the forcedReload parameter of location.reload() , reloads by fetching a fresh copy of the page and all of its resources (scripts, stylesheets, images, etc.). Will not serve any resources from the cache — gets fresh copies from the server without sending any if-modified-since or if-none-match headers in the request.

Equivalent to the user doing a «hard reload» in browsers where that’s possible.

Note that passing true to location.reload() is supported in Firefox (see MDN) and Internet Explorer (see MSDN) but is not supported universally and is not part of the W3 HTML 5 spec, nor the W3 draft HTML 5.1 spec, nor the WHATWG HTML Living Standard.

In unsupporting browsers, like Google Chrome, location.reload(true) behaves the same as location.reload() .

location.reload() or location.reload(false)

Reloads the page, fetching a fresh, non-cached copy of the page HTML itself, and performing RFC 7234 revalidation requests for any resources (like scripts) that the browser has cached, even if they are fresh are RFC 7234 permits the browser to serve them without revalidation.

Exactly how the browser should utilise its cache when performing a location.reload() call isn’t specified or documented as far as I can tell; I determined the behaviour above by experimentation.

This is equivalent to the user simply pressing the «refresh» button in their browser.

location = location (or infinitely many other possible techniques that involve assigning to location or to its properties)

Only works if the page’s URL doesn’t contain a fragid/hashbang!

Reloads the page without refetching or revalidating any fresh resources from the cache. If the page’s HTML itself is fresh, this will reload the page without performing any HTTP requests at all.

This is equivalent (from a caching perspective) to the user opening the page in a new tab.

However, if the page’s URL contains a hash, this will have no effect.

Again, the caching behaviour here is unspecified as far as I know; I determined it by testing.

JavaScript Refresh Page Method

Contents

JavaScript Refresh Page: Main Tips

• The location.reload() method reloads the current web page.
• The method gives the exact same result as pressing the RELOAD button in your browser.
• The JavaScript reload page method loads the page from the cache by default. If the forceGet property is set to true, the page is reloaded from the server.
• The JS reload page method does not have a return value.

Using location.reload()

The JavaScript refresh page function can reload the current resource. In most cases, a page is selected to be refreshed. The method also has other perks, such as helping you get the URL address of the current page, redirect the browser to another page, and, of course, refresh page JavaScript.

The following example contains the code you can use to reload a website. Click the Try it Live button, and make modifications to the script!

The boolean parameter of this JS reload page method is automatically set as false. If you indicate true in the parentheses, the page will be reloaded from the server instead of cache.

In other words, by replacing the default false with true, you are forcing the website to be loaded from the server.

The JavaScript refresh page method is a popular choice among developers to reload webpages. The location of the document loaded on the window is found in the location variable. By invoking the location.reload() , you will perform the same kind of reload a regular browser refresh executes.

location.reload() Syntax

This is how you can call the refresh page JavaScript method from within your code (to reload from server):

We have indicated that JavaScript refresh page command can have the forceGet parameter included in the the parentheses. This parameter always has a boolean value of either true or false However, it is optional.

The forceGet parameter should be only used when developers want to force the website to reload from the server. The JavaScript refresh page function without a parameter in its parentheses will reload the page from cache.

Another way to reload the page is by using the timedRefresh command. You can specify how frequently to refresh the page, and it will do so automatically non-stop.

Javascript Reload Page

In order to reload the page without fully reloading everything I’m using:

However, this doesn’t work for some reason when there is anchor text. It appears to do nothing in this case, but more likely it refreshes the anchor.

Any fix for this that will reload the page (as above) without reloading the cached images and scripts?

5 Answers 5

Try using location.reload(false) .

As MDN says, the second parameter is a boolean indicating whether to bypass the cache or not. false keeps using the cache, as you wanted.

icktoofay explains the workaround so I’m just addressing this question:

However, this doesn’t work for some reason when there is anchor text. It appears to do nothing in this case, but more likely it refreshes the anchor.

HTML 5 describes the Location interface which covers assignment to document.location .

When the assign(url) method is invoked, the UA must resolve the argument, relative to the entry script’s base URL, and if that is successful, must navigate the browsing context to the specified url.

So the navigate operation only sees an absolute URL, so there is no difference assigning just a fragment vs assigning an absolute URL that is the same as the page URL with a fragment.

8 Fragment identifiers: Apply the URL parser algorithm to the absolute URL of the new resource and the address of the active document of the browsing context being navigated. If all the components of the resulting parsed URLs, ignoring any fragment components, are identical, and the new resource is to be fetched using HTTP GET or equivalent, and the parsed URL of the new resource has a fragment component that is not null (even if it is empty), then navigate to that fragment identifier and abort these steps.

When the user agent is required to scroll to the fragment identifier, it must either change the scrolling position of the document using the scroll an element into view algorithm defined in the CSSOM View specification, with the align to top flag set, or perform some other action, such that the indicated part of the document is brought to the user’s attention.

Check if page gets reloaded or refreshed in JavaScript

I want to check when someone tries to refresh a page.

For example, when I open a page nothing happens but when I refresh the page it should display an alert.

12 Answers 12

⚠️⚠️⚠️ window.performance.navigation.type is deprecated, pls see Илья Зеленько’s answer

A better way to know that the page is actually reloaded is to use the navigator object that is supported by most modern browsers.

New standard 2018-now (PerformanceNavigationTiming)

window.performance.navigation property is deprecated in the Navigation Timing Level 2 specification. Please use the PerformanceNavigationTiming interface instead.

PerformanceNavigationTiming.type

Check the Browser compatibility table carefully before using this in production.

Support on 2019-07-08

The type read-only property returns a string representing the type of navigation. The value must be one of the following:

navigate — Navigation started by clicking a link, entering the URL in the browser’s address bar, form submission, or initializing through a script operation other than reload and back_forward as listed below.

reload — Navigation is through the browser’s reload operation or location.reload() .

back_forward — Navigation is through the browser’s history traversal operation.

prerender — Navigation is initiated by a prerender hint.