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
What is javascript:void(0) and How it Works?
Anuj Sharma
Last Updated Jun 15, 2026
A comprehensive explanation about using javascript:void(0) in javascript. When to use javascript:void(0) and how it works with examples of using it with anchor tag.
Understand JavaScript Date Object with Examples (for JavaScript Interviews)
Anuj Sharma
Last Updated Jun 15, 2026
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.
How to Format Phone Number in JavaScript (JavaScript Interview)
Anuj Sharma
Last Updated Jun 15, 2026
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.
Ultimate guide to REST API calls using Fetch: Machine Coding Essential
Vivek Chavan
Last Updated Jun 15, 2026
You will get a clear understanding about working with any rest api and common concepts asked during interviews
Understanding popstate event in Single Page Applications (SPAs)
Vijay Sai Krishna vsuri
Last Updated Feb 21, 2026
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.
25+ Top JavaScript Interview Questions and Answers For Beginners
Anuj Sharma
Last Updated Feb 6, 2026
A comprehensive list of important JavaScript Interview Questions and Answers for Beginners with a detailed explanation of the applied JavaScript concept for in-depth understanding.
How to convert RGB to HEX in JavaScript
Anuj Sharma
Last Updated Dec 17, 2025
A quick way to convert RGB to HEX in JavaScript that will help to do the CSS RGB to HEX color conversion programmatically
How to convert HEX to RGB in JavaScript
Anuj Sharma
Last Updated Dec 17, 2025
A quick way to convert HEX to RGB in JavaScript that will help to do the CSS HEX to RGB color conversion programmatically.
