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 programmatically.
Anuj Sharma
Last Updated Sep 15, 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 on button click or on form submission.
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 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
Advertisement
Vijay Sai Krishna vsuri
Last Updated Aug 21, 2025
A Quick guide about popstate event in JavaScript, If you’ve ever hit the back button in your browser and wondered how your Single-Page Application knows which view to render, this guide is for you.
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 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.
Anuj Sharma
Last Updated Sep 15, 2025
A detailed list of 20+ most asked Frontend Machine Coding Round Interview Questions and resources both in JavaScript & React, also covers expected functional/Non-functional requirements.
Anuj Sharma
Last Updated Sep 15, 2025
A comprehensive cheat sheet for the Frontend Machine Coding Round Interview, which helps to revise all the important machine coding & UI design concepts before your next Machine Coding interview.
Kirtesh Bansal
Last Updated Aug 31, 2025
A beginner-friendly guide to understanding call, apply, and bind methods in JavaScript, along with step-by-step call, apply and bind polyfill implementations that are often asked in interviews.
Subscribe to FrontendGeek Hub for the frontend interview preparation, interview experiences, curated resources and roadmaps.
© 2024 FrontendGeek. All rights reserved
