Home Basics How to Reload a Page using JavaScript

How to Reload a Page using JavaScript

In JavaScript, the reload() method is used to reload a webpage. It is similar to the refresh button of the browser. This method does not return any value.

Syntax

location.reload()

This method can have optional parameters true and false.

The true keyword force to reload the page from the server, while the false keyword reloads the page from the cache.

This code can be called automatically upon an event or simply when the user clicks on a link.

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() — and in fact has never been part of any specification for location.reload() ever published. This is historical and seems to have been introduced way back in the days of Netscape navigator.

Example

In this example, the function reloadMe() contains the location.reload() method. We are calling the function reloadMe() using the onclick attribute of the button element. So, we have to click the given HTML ‘Reload’ button to see the effect. After clicking the button, the page will reload.

Create an html page with this code in it

 

<!DOCTYPE html>  
<html>  
<head>  
<title>  
location.reload() method  
</title>  
<script>  
function reloadMe() {  
location.reload();  
}  
</script>  
</head>  
  
<body>  
<h1> Welcome to the web site example </h1>  
  
<h2> This is an example of location.reload() method </h2>  
  
<p> Click the following 'Reload' button to see the effect. </p>  
  
<button onclick = "reloadMe()"> Reload Page</button>  
</body>  
</html>

How to Reload a Page Automatically in JavaScript

We can also allow a page refresh after a fixed time use the setTimeOut() method as seen below:

setTimeout(() => {
  document.location.reload();
}, 5000);

Using the code above our web page will reload every 5 seconds.

You may also like