5 Different Ways to Reload Page in JavaScript (Frontend Interview)
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 Dec 16, 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.
Table of Contents
- Reload page using javascript:location.reload(true) method
- Window location reload by setting the URL using location.href
- Window Reload by Assigning the current history using location.assign()
- Reload Page by Replacing the current history using location.replace()
- Setting new properties to location
- Other Approaches: Reload the page using history.go() and Meta tag
5 Ways to Reload Page in JavaScript
Approach 1: Reload page using javascript:location.reload(true) method (Most Common)
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"
Example:
<!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>Approach 2: Window Location Reload by setting the URL using location.href
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.
Example:
<!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>
Approach 3: Window reload by assigning the current history using location.assign()
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.
Example:
function reloadPageWithAssign() {
window.location.assign(window.location.href);
}
//Example usage
//<button onclick="reloadPageWithAssign()">Reload with Assign()</button>Approach 4: Window reload by replacing the current history using location.replace()
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.
Example:
function reloadPageWithReplace() {
window.location.replace(window.location.href);
}
//Example usage
//<button onclick="reloadPageWithReplace()">Reload with replace</button>Approach 5: Reload page by setting new properties to the location
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.
Example:
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>Other Approaches: Reload page using history.go() Or Using Meta tag
1. Reload page in JavaScript using history.go() method
go(<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); 2. Reload page using the http-equiv Meta tag
This 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.
Conclusion: Which is the best method to Reload Page in JS?
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.
Learn Next š
A seasoned Sr. Engineering Manager at GoDaddy (Ex-Dell) with over 12+ years of experience in the frontend technologies. A frontend tech enthusiast passionate building SaaS application to solve problem. Know more about me š
Learn Next
Comments
Be the first to share your thoughts!
No comments yet.
Start the conversation!
Share your expertise
Publish a blog or quick notes on topics you know well ā your write-up could be the answer someone needs before their next frontend interview.
Build your portfolio
Help the community
Sharpen your skills
Earn goodies
Other Related Blogs
React Hook Rules: Why hooks declarations are not allowed inside functions
Frontendgeek
Last Updated Feb 6, 2026
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.
Implementing a stopwatch using React - Frontend Machine Coding Question
Pallavi Gupta
Last Updated Feb 21, 2026
Concise explanation of stopwatch implementation using React, it involves the usage of useEffect hook for creating a stopwatch and tracking milliseconds.
Implement useClickOutside() custom Hook in React [Interview]
Anuj Sharma
Last Updated Dec 23, 2025
Understand the implementation of useClickOutside() custom hook in react and how it can be used to implement Modal like functionality.
Best Frontend System Design Interview Cheat Sheet š
Anuj Sharma
Last Updated Jun 9, 2026
A Comprehensive Frontend System Design Cheat Sheet helps you approach the Frontend System Design Interview in the most structured way and covers the 7 most important Frontend System Design Topics.
