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 reload window using JS programmatically.
Anuj Sharma
Last Updated Sep 25, 2025
Reloading page using JavaScript 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 on button click or on form submission.
In this quick blog, we will cover the 5 most efficient ways to reload a page in JavaScript.
This is the standard and most frequently used way to JavaScript page reload, programmatically. 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 value of href is generally used to redirect the page to another URL. This feature can also be used to window location reload in JavaScript; in this case, rather than providing any other URL, we can assign the current URL itself, which causes a window reload.
Note: This is generally not the preferred way to reload the window/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 the 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 in JavaScript by passing the 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 the 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 parameter is added as part of the URL, and then the new URL is assigned with the added query parameter. This behaviour is like a new URL to reload window because of the added query parameter.
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. This is one of the key ways to load window programmatically on button click.
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 refresh page in JavaScript 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
Alok Kumar Giri
Last Updated Jun 2, 2025
Code snippet examples which will help to grasp the concept of Hoisting in JavaScript, with solutions to understand how it works behind the scene.
Anuj Sharma
Last Updated Oct 2, 2025
Explore Polyfill for map, filter and reduce array methods in JavaScript. A detailed explanation of Map, filter and reduce polyfills in JS helps you to know the internal working of these array methods.
Anuj Sharma
Last Updated Oct 28, 2025
Find the step-by-step explanation of the useFetch custom hook in React that helps in fetching the data from an API and handling loading, error states.
Anuj Sharma
Last Updated Aug 3, 2025
Explore the implementation of setTimeout in JavaScript with a detailed explanation for every step. Understand all scenarios expected to implement the setTimeout polyfill.
Frontendgeek
Last Updated Nov 1, 2025
A quick guide to explain an important react interview question, why React Hooks declarations are not allowed inside functions or any conditional blocks with code example.
Anuj Sharma
Last Updated Oct 26, 2025
In this post, we will going to cover the step-by-step implementation of Infinite Currying Sum with a code example. This is one of the most common JavaScript Interview questions.
Subscribe to FrontendGeek Hub for the frontend interview preparation, interview experiences, curated resources and roadmaps.
© 2024 FrontendGeek. All rights reserved
