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
How to use window.location to redirect to a different URL with JavaScript?
You might have encountered a situation where you clicked a URL to reach a page X but internally you were directed to another page Y. This happens due to page redirection.
JavaScript provides several methods to redirect users to different URLs using the window.location object. This is useful for creating dynamic navigation, handling authentication, or redirecting after form submissions.
Common Redirect Methods
There are three main ways to redirect using window.location:
| Method | Description | Back Button Behavior |
|---|---|---|
window.location.href |
Most common method | Can go back to previous page |
window.location.assign() |
Same as href | Can go back to previous page |
window.location.replace() |
Replaces current page in history | Cannot go back to previous page |
Using window.location.href
This is the most commonly used method for redirection:
<html>
<head>
<script>
function redirectWithHref() {
window.location.href = "https://www.tutorialspoint.com";
}
</script>
</head>
<body>
<p>Click to redirect using href:</p>
<button onclick="redirectWithHref()">Redirect Me</button>
</body>
</html>
Using window.location.assign()
This method loads a new document and adds it to the browser history:
<html>
<head>
<script>
function redirectWithAssign() {
window.location.assign("https://www.tutorialspoint.com");
}
</script>
</head>
<body>
<p>Click to redirect using assign():</p>
<button onclick="redirectWithAssign()">Redirect Me</button>
</body>
</html>
Using window.location.replace()
This method replaces the current document without adding to history:
<html>
<head>
<script>
function redirectWithReplace() {
window.location.replace("https://www.tutorialspoint.com");
}
</script>
</head>
<body>
<p>Click to redirect using replace():</p>
<button onclick="redirectWithReplace()">Redirect Me</button>
</body>
</html>
Automatic Redirect with Delay
You can also redirect automatically after a certain time delay:
<html>
<head>
<script>
function autoRedirect() {
setTimeout(function() {
window.location.href = "https://www.tutorialspoint.com";
}, 3000); // Redirect after 3 seconds
}
</script>
</head>
<body onload="autoRedirect()">
<p>You will be redirected to TutorialsPoint in 3 seconds...</p>
</body>
</html>
Redirecting to Relative URLs
You can also redirect to relative paths within your website:
<html>
<head>
<script>
function redirectToPage() {
// Redirect to a relative path
window.location.href = "/contact.html";
// Or redirect to parent directory
// window.location.href = "../index.html";
}
</script>
</head>
<body>
<button onclick="redirectToPage()">Go to Contact Page</button>
</body>
</html>
Conclusion
Use window.location.href for standard redirects, window.location.replace() when you don't want users to go back, and setTimeout() for automatic redirects. Choose the method based on your specific navigation requirements.
569 Views
