In JavaScript, the reload function serves the purpose of reloading the current webpage. It functions similarly to the refresh button found in web browsers. Notably, this method does not yield any return value.
Syntax
location.reload()
This method can accept optional arguments of true and false. When the true keyword is specified, it compels the browser to refresh the page directly from the server. Conversely, using the false keyword results in the page being reloaded from the cache.
The default value for this method's parameter is set to false; therefore, if we do not specify a value for the parameter, the reload method will refresh the page using the cached version. In other words, invoking object.reload is equivalent to calling object.reload(false).
Let’s examine a demonstration of how to utilize the location.reload function.
Example
In this instance, the function named fun incorporates the location.reload method. We are invoking the fun function through the onclick attribute associated with the button element. Therefore, to observe the outcome, it is necessary to click on the provided HTML 'Reload' button. Upon clicking this button, the webpage will refresh.
<!DOCTYPE html>
<html>
<head>
<title>
location.reload() method
</title>
<script>
function fun() {
location.reload();
}
</script>
</head>
<body>
<h1> Welcome to the logic-practice.com </h1>
<h2> This is an example of location.reload() method </h2>
<p> Click the following 'Reload' button to see the effect. </p>
<button onclick = "fun()"> Reload </button>
</body>
</html>
Output
In the preceding example, rather than invoking the fun function, we can alternatively link the location.reload method directly to the button's markup. This can be accomplished as illustrated below:
<button onclick = "location.reload()"> Reload </button>
By utilizing the aforementioned syntax, there is no necessity to develop a JavaScript function for the purpose of reloading the web page.