How to Reload a Page using JavaScript

The location.reload() Method

JavaScript provides a trendy among developers — location.reload() , which finds ways to reload the page at the current URL.

The location interface represents the URL of the object to which it is linked. The location object is like a piece of the window object and is called through the window.location property. One of the location’s methods is reload(), which is used to reload a document.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <input type="button" value="Reload Page" onclick="window.location.reload()" />
    <div>Welcome to W3Docs</div>
  </body>
</html>
A note from MDN: 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.

So, a boolean parameter is not part of the current specification for location.reload() — we have a lot of codes that misconception used location.reload() though — and in fact, it has never been part of any specification for location.reload() ever published.

The JavaScript reload() method loads the page from the cache by default.

timeRefresh Function

There is also another way to reload the page using the timeRefresh function. You can specify how frequently to refresh the page, and it will be loaded non-stop:

function timeRefresh(time) {
  setTimeout("location.reload();", time);
}

Then, you can use it with onload event, for example, on the body of the page like so:

<body onload="timeRefresh(2000);"> /* refresh every 2 seconds */

How to Reload a Page Using the JavaScript History Function

The history function is usually used to navigate back or forth by passing in either a positive or negative value.

If we tend to refresh the page, we can do so by not passing any parameters or by passing 0

history.go();
history.go(0);