How To Refresh/Reload A Page In JavaScript 10 Methods
We can load any page by clicking the link of that page. However, sometimes we need to reload or refresh the same page using JavaScript. Here I am going to show the methods that you can opt. Let’s go towards 10 methods to refresh a page in JavaScript. Al these methods are single-line statements in simple JavaScript. No complicated functions nothing. You can simply copy-paste each code in a simple HTML page and can execute.
In all the examples below, I am binding the reload event to a button click. This will be an easy task for newbies. The refresh page event will fire when the user will click the button. Along with, I am using PHP to print date in Hour:Minute: Second AM/PM format to show that the page has reloaded.
#1 Use reload() method to refresh page in JavaScript
The first one is simple by using the reload() method of JavaScript. This stamen will simply reload the location of the window, Hence, will refresh the page.
<!DOCTYPE html>
<html>
<head>
<title>Reload page example#1 - Techbriefers</title>
</head>
<body>
<h1> Now is: <?php echo date('H:i:s A'); ?></h1>
<input type="button" value="Reload Page" onClick="window.location.reload();">
</body>
</html>#2 Page reload Using document.location.reload(true);
In this method, the location of the document will be reloaded and results in a page refresh. Passing true as a parameter will enable to load the page from the server. If we will pass false, then too, the page will get refresh but the page will be fetched from cache. So, it depends on the requirements what to use.
<!DOCTYPE html>
<html>
<head>
<title>Reload page example#2 - Techbriefers</title>
</head>
<body>
<h1> Now is: <?php echo date('H:i:s A'); ?></h1>
<input type="button" value="Reload Page" onClick="document.location.reload(true);">
</body>
</html>#3 Self Location replace tp refresh page in JavaScript
In this method, the page’s self-location will be replaced with the document’s location. That means the document’s location will be replaced by current location and will refresh the web page.
<!DOCTYPE html>
<html>
<head>
<title>Reload page example#3 - Techbriefers</title>
</head>
<body>
<h1> Now is: <?php echo date('H:i:s A'); ?></h1>
<input type="button" value="Reload Page" onClick="self.location.replace(location['href'])">
</body>
</html>#4 Refresh page by assigning location to window location
This is a very simple method to refresh the page using JavaScript. In this method, window location will get assigned the value of the current location, which will result in the page reload.
<!DOCTYPE html>
<html>
<head>
<title>Reload page example#4 - Techbriefers</title>
</head>
<body>
<h1> Now is: <?php echo date('H:i:s A'); ?></h1>
<input type="button" value="Reload Page" onClick="window.location = location">
</body>
</html>#5 Assign location reference to window location
Here, I have assigned location reference to the location of the window. As location reference is of the same page, it will force a page to reload.
<!DOCTYPE html>
<html>
<head>
<title>Reload page example#5 - Techbriefers</title>
</head>
<body>
<h1> Now is: <?php echo date('H:i:s A'); ?></h1>
<input type="button" value="Reload Page" onClick="window.location = location.href">
</body>
</html>#6 JavaScript reload by self.location
In the below example, the method I have used is, assigning the location to self-location. Web Page’s self-location will get assigned a value which is window location by self.location.assign(window.location) to reload the web page.
<!DOCTYPE html>
<html>
<head>
<title>Reload page example#6 - Techbriefers</title>
</head>
<body>
<h1> Now is: <?php echo date('H:i:s A'); ?></h1>
<input type="button" value="Reload Page" onClick="self.location.assign(window.location)">
</body>
</html>#7 By replacing the current location
I am now using the replacement method. Below I am replacing the current location with the location of the window. Both are same, hence will reload the page Using Javascript code.
<!DOCTYPE html>
<html>
<head>
<title>Reload page example#7 - Techbriefers</title>
</head>
<body>
<h1> Now is: <?php echo date('H:i:s A'); ?></h1>
<input type="button" value="Reload Page" onClick="location['replace'](window.location)">
</body>
</html>#8 Using history.go to reload the page
<!DOCTYPE html>
<html>
<head>
<title>Reload page example#8 - Techbriefers</title>
</head>
<body>
<h1> Now is: <?php echo date('H:i:s A'); ?></h1>
<input type="button" value="Reload Page" onClick="history.go(0);">
</body>
</html>#9 Assign self-location reference to the current location
NOw in this method, I will assign the self-location reference to the current location. As the current URL will get assigned to the current location, the page will load that location. The location is the same as the current location, so will refresh the page.
<!DOCTYPE html>
<html>
<head>
<title>Reload page example#9 - Techbriefers</title>
</head>
<body>
<h1> Now is: <?php echo date('H:i:s A'); ?></h1>
<input type="button" value="Reload Page" onClick="location.assign(self.location.href)">
</body>
</html>#10 Replace current location by self-location reference
<!DOCTYPE html>
<html>
<head>
<title>Reload page example#10 - Techbriefers</title>
</head>
<body>
<h1> Now is: <?php echo date('H:i:s A'); ?></h1>
<input type="button" value="Reload Page" onClick="location.replace(self.location.href)">
</body>
</html>