Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Location reload() method
The HTML DOM Location reload() method is used to reload the current document, providing the same functionality as the browser's reload button. This method re-renders the entire page, either from the server or browser cache depending on the parameter passed.
Syntax
Following is the syntax for the location.reload() method −
location.reload(forceGetParameter)
Parameters
The forceGetParameter is an optional boolean parameter that determines how the page is reloaded −
| forceGetParameter | Details |
|---|---|
| true | Forces the page to reload from the server, bypassing the browser cache. |
| false or omitted | Reloads the page from the browser cache if available, otherwise from the server. |
Note: The forceGetParameter is deprecated in modern browsers and may not work as expected. Most browsers now treat location.reload() the same regardless of the parameter value.
Return Value
The location.reload() method does not return any value. It simply reloads the current document.
Example − Basic Page Reload
Following example demonstrates how to use the location.reload() method to reload a page with form data −
<!DOCTYPE html>
<html>
<head>
<title>Location reload() Method</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
form {
width: 400px;
margin: 0 auto;
text-align: center;
border: 2px solid #ccc;
padding: 20px;
border-radius: 10px;
}
input[type="email"], input[type="password"] {
width: 200px;
padding: 8px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="button"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
input[type="button"]:hover {
background-color: #45a049;
}
#divDisplay {
margin-top: 15px;
color: #d9534f;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>User Login Form</legend>
<label for="emailSelect">Email: </label><br>
<input type="email" id="emailSelect" placeholder="Enter your email"><br><br>
<label for="passSelect">Password: </label><br>
<input type="password" id="passSelect" placeholder="Enter your password"><br><br>
<input type="button" onclick="doReload()" value="Reload Page">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Warning: Reloading will clear all entered data!';
function doReload() {
alert('Page will reload now. All form data will be lost!');
location.reload();
}
</script>
</body>
</html>
When you enter data in the form fields and click "Reload Page", an alert appears warning that data will be lost, then the page reloads and clears all form inputs.
Example − Reload with Timer
Following example shows how to automatically reload a page after a specified time interval −
<!DOCTYPE html>
<html>
<head>
<title>Auto Reload Timer</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
.timer-display {
font-size: 24px;
color: #e74c3c;
margin: 20px;
}
button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<h2>Auto Reload Timer</h2>
<p>This page will automatically reload in:</p>
<div class="timer-display" id="countdown">10</div>
<p>seconds</p>
<button onclick="cancelReload()">Cancel Auto Reload</button>
<button onclick="reloadNow()">Reload Now</button>
<script>
let timeLeft = 10;
let countdownTimer;
function updateCountdown() {
document.getElementById("countdown").textContent = timeLeft;
if (timeLeft <= 0) {
location.reload();
}
timeLeft--;
}
function startCountdown() {
countdownTimer = setInterval(updateCountdown, 1000);
}
function cancelReload() {
clearInterval(countdownTimer);
document.getElementById("countdown").textContent = "Cancelled";
}
function reloadNow() {
location.reload();
}
// Start the countdown when page loads
startCountdown();
</script>
</body>
</html>
This example displays a countdown timer that automatically reloads the page after 10 seconds, with options to cancel the reload or reload immediately.
Common Use Cases
The location.reload() method is commonly used in the following scenarios −
-
Form Reset − Clearing all form data and returning to the initial state.
-
Error Recovery − Refreshing the page when an error occurs or when content fails to load.
-
Auto-refresh − Periodically updating dynamic content like news feeds or stock prices.
-
Cache Clearing − Ensuring users see the latest version of the page content.
Browser Compatibility
The location.reload() method is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. The forceGetParameter is deprecated and should not be relied upon for consistent behavior across different browsers.
Conclusion
The location.reload() method provides a simple way to refresh the current page programmatically. While the forceGetParameter is deprecated, the method itself remains useful for form resets, error recovery, and auto-refresh functionality. Always consider the user experience when implementing automatic page reloads.
377 Views
