Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference between window.location.href, window.location.replace and window.location.assign in JavaScript?
The window object includes the location object in JavaScript, which provides three different methods for navigating between pages. Each method has distinct behavior regarding browser history and navigation.
window.location.href
The href property gets or sets the complete URL of the current page. When assigned a new value, it navigates to that URL and adds an entry to the browser's history stack.
Example
<!DOCTYPE html>
<html>
<body>
<p>Click below to get the complete URL of the page.</p>
<button onclick="display()">Get Current URL</button>
<button onclick="navigate()">Navigate to New Page</button>
<script>
function display() {
var res = location.href;
alert("Current URL: " + res);
}
function navigate() {
location.href = "https://www.tutorialspoint.com";
}
</script>
</body>
</html>
window.location.replace()
The replace() method replaces the current document with a new one. Unlike href, it does not add an entry to the browser's history stack, making it impossible to navigate back to the previous page using the browser's back button.
Example
<!DOCTYPE html>
<html>
<body>
<p>This will replace the current page without adding to history.</p>
<button onclick="display()">Replace Current Document</button>
<script>
function display() {
location.replace("https://www.tutorialspoint.com");
}
</script>
</body>
</html>
window.location.assign()
The assign() method loads a new document at the specified URL. Like href, it adds an entry to the browser's history stack, allowing users to navigate back to the previous page.
Example
<!DOCTYPE html>
<html>
<body>
<p>This will load a new document and add to history.</p>
<button onclick="display()">Open New Document</button>
<script>
function display() {
location.assign("https://www.tutorialspoint.com");
}
</script>
</body>
</html>
Comparison
| Method | Adds to History | Back Button Works | Use Case |
|---|---|---|---|
location.href |
Yes | Yes | Normal navigation |
location.replace() |
No | No | Redirects, login flows |
location.assign() |
Yes | Yes | Programmatic navigation |
Key Differences
History Management: Both href and assign() add entries to browser history, while replace() does not. This makes replace() ideal for redirects where you don't want users to return to the previous page.
Syntax: href can be used as both getter and setter, while assign() and replace() are methods that only accept a URL parameter.
Common Use Cases
Use location.href for standard navigation where users should be able to go back. Use location.replace() for login redirects or error pages where returning to the previous state would be problematic. Use location.assign() when you need explicit programmatic navigation with history support.
Conclusion
Choose replace() when you want to prevent users from navigating back, and use href or assign() for normal navigation that preserves browser history.
760 Views
