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
JavaScript - Redirect a URL
In JavaScript, redirecting a user from one URL to another is a straightforward task. There are multiple ways to achieve this, but we'll focus on two of the most common and effective methods: window.location.href and window.location.replace(). Both are widely used for different purposes, and understanding when to use each one can help improve user navigation on your site.
Approaches to Redirect a URL in JavaScript
Following are the different approaches to redirect a URL:
Redirect a URL Using window.location.href Property
The window.location.href property is one of the simplest and most commonly used methods to redirect a user to a new URL. It behaves like a traditional hyperlink and changes the browser's location to the specified URL.
Syntax
window.location.href = "https://example.com";
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Redirect with href</title>
</head>
<body>
<h1>JavaScript Redirect a URL</h1>
<button id="redirectBtn">CLICK HERE</button>
<p>Click on the above button to redirect to Google</p>
<script>
document.getElementById('redirectBtn').addEventListener('click', function() {
window.location.href = 'https://www.google.com';
});
</script>
</body>
</html>
How It Works
This command changes the current page's URL to the one specified. The browser will load the new page and add the previous page to the browser's history stack, allowing the user to use the "back" button.
When to Use: This method is ideal when you want the user to be able to navigate back to the previous page.
Redirect a URL Using window.location.replace() Method
The window.location.replace() method performs a URL redirect but with a key difference from href. It replaces the current page in the browser's history, meaning the user cannot hit the "back" button to return to the original page.
Syntax
window.location.replace("https://example.com");
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redirect with replace()</title>
</head>
<body>
<h1>URL Redirect with replace()</h1>
<button id="replaceButton">Go to Example.com (Replace)</button>
<p>This redirect will replace current page in history</p>
<script>
document.getElementById("replaceButton").addEventListener("click", function() {
// Redirect and replace the current page in history
window.location.replace("https://www.example.com");
});
</script>
</body>
</html>
How It Works
This method replaces the current page in the browser history instead of adding a new entry. Users cannot navigate back to the replaced page using the browser's back button.
When to Use: Use this method for login redirects, form submissions, or when you don't want users returning to the current page.
Comparison
| Feature | window.location.href | window.location.replace() |
|---|---|---|
| Browser History | Adds new entry | Replaces current entry |
| Back Button | Can go back | Cannot go back |
| Use Case | General navigation | Login/logout, form submissions |
Other Redirect Methods
You can also use window.location.assign() which behaves similarly to href:
window.location.assign("https://example.com");
Conclusion
Use window.location.href for standard redirects where users might need to go back. Use window.location.replace() when you want to prevent users from returning to the current page, such as after login or form submissions.
752 Views
