Explore the 5 most efficient ways to Refresh or Reload page in JavaScript similar to location.reload(true), and identify the appropriate use cases to use one of these different approaches.
Anuj Sharma
Last Updated Jan 17, 2025
Advertisement
Reloading pages programmatically is a very common use-case in javascript, to reflect the new set of information on the web page. There are a few ways to refresh page in JavaScript with a click of a button or on the form submit.
In this quick blog, we will cover the 5 most efficient ways to reload page in javascript.
This is the standard and most frequently used way to reload a page programmatically in JS. It reloads the current page from the cache.
Note: If you want to force a reload from the server (bypassing the cache), you can pass true as an argument(<forceGet>) example - location.reload(true). It only works in "Firefox"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
// Reload from cache (default)
function reloadPageFromCache() {
window.location.reload();
console.log("reload from cache");
}
// Pass true to force a reload bypassing the cache. Defaults to false. Only supported in Firefox.
function reloadPage() {
window.location.reload(true);
}
</script>
</head>
<body>
<h1>Page Reload Example: window.location.reload()</h1>
<button onclick="reloadPageFromCache()">Reload page (From Cache)</button>
<button onclick="reloadPage()">Reload page</button>
</body>
</html>href property of the location interface contains the current URL and setting the the value of href is generally used to redirect the page to another URL. This feature can also be used to do the page reloading, in this case rather than providing any other URL, we can assign the current URL itself which causes a page reload.
Note: this is generally not the preferred way to reload the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>
function reloadPageWithHref() {
window.location.href = window.location.href;
}
</script>
</head>
<body>
<h1>Page Reload Example: window.location.href</h1>
<button onclick="reloadPageWithHref()">
Reload with href
</button>
</body>
</html>
assign() method of location interface is generally used to redirect programmatically to the new URL given as part of the input, and this can be used to reload the current page by passing the current page URL using location.href.
function reloadPageWithAssign() {
window.location.assign(window.location.href);
}
//Example usage
//<button onclick="reloadPageWithAssign()">Reload with Assign()</button>replace() method of location interface is also used to redirect programmatically to the new URL given as part of the input, and this can be used to reload the current page by passing the current page URL using location.href.
The main difference between assign() and replace() methods is that the replace() method doesn't store the current URL as part of the history.
function reloadPageWithReplace() {
window.location.replace(window.location.href);
}
//Example usage
//<button onclick="reloadPageWithReplace()">Reload with replace</button>This is not a very common approach to reload page in JavaScript. In this approach, a new query param is added as part of the URL and then assign the new URL with the added query param. This behaviour is like a new URL because of the added query param.
function reloadWithQueryParameter() {
const url = new URL(window.location.href);
url.searchParams.set('reloaded', 'true'); // Add or update a query parameter
window.location = url.href;
}
//Example usage
//<button onclick="reloadWithQueryParameter()">Reload with parameter</button>history.go() Or Using Meta taggo(<delta>) method of the History interface can load a specific page from the browser history. It takes an optional numeric parameter delta. This parameter value can be used to load backwards or forward pages. Positive(+ve) values can be used to load forward history pages and negative(-ve) values can be used to load backward history pages.
To reload the current page, go() or go(0) can be used to refresh or reload page in javascript, check the example below 👇👇
Example
// Load 2 pages forward from the history
history.go(2);
// Load 1 page backwards from the history
history.go(-1);
📌 Reload the current page
history.go();
or
history.go(0);http-equiv Meta tagThis meta tag name is a short form of http-equivalent, because all the values used as part of this tag are HTTP equivalent.
http-equiv can have different values, but to refresh the page, It should have the value as http-equiv="refresh". There is another parameter to this meta tag called content, where we can define the number of seconds (Non-negative, otherwise ignored) after which the page will reload.
<meta http-equiv="refresh" content="5">In the above example, content="5" means the page will automatically refresh in 5 sec, and this time will calculate once the page load() event gets triggered.
window.location.reload(): This is the most common and generally preferred method for page reload in JavaScript.window.location.replace(): Use this when you want to reload the current page and also want to prevent the user from going back to the reloaded page in the browser's history for example after form submissions or card transactions.Advertisement
Advertisement
Advertisement
Anuj Sharma
Last Updated Jan 9, 2025
Go through different ways to display dates using javascript date object. It covers examples of date object usage to understand the main concepts of javascript date object.
Anuj Sharma
Last Updated Jan 29, 2025
Understand the difference between HTTP/2 vs HTTP/1.1 based on the various parameters, which helps to understand the improvement areas of HTTP/2 over HTTP 1.1
Anuj Sharma
Last Updated Dec 10, 2024
A brief explanation of Cross-Origin Resource Sharing (CORS) concept to enable client application accessing resources from cross domain and HTTP headers involved to enable resource access.
Anuj Sharma
Last Updated Jan 16, 2025
Deep dive into promise.all polyfill in javascript will help to understand the working of parallel promise calls using Promise.all and its implementation to handle parallel async API calls.
Anuj Sharma
Last Updated Jan 9, 2025
Learn the best & quickest way to format phone number in JavaScript with or without country codes. This will help websites to show the phone numbers in a more human-readable format.
Anuj Sharma
Last Updated Feb 22, 2025
Easy to understand 5 rules, that cover the behaviour of the "this" keyword in different contexts and helps you to master this keyword for any javascript interview.
© 2024 FrontendGeek. All rights reserved
