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 JavaScript to redirect an HTML page?
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. It happens due to page redirection.
JavaScript provides several methods to redirect users from one page to another. This is commonly used for routing users after form submissions, authentication, or when content has moved to a new location.
Methods for Page Redirection
There are three main ways to redirect pages using JavaScript:
Using window.location.href
The most common method assigns a new URL to window.location.href:
<html>
<head>
<script>
function redirectToHome() {
window.location.href = "https://www.tutorialspoint.com";
}
</script>
</head>
<body>
<p>Click the button to redirect to TutorialsPoint homepage.</p>
<button onclick="redirectToHome()">Go to Homepage</button>
</body>
</html>
Using window.location.assign()
This method loads a new document and allows users to navigate back using the browser's back button:
<html>
<head>
<script>
function redirectWithAssign() {
window.location.assign("https://www.tutorialspoint.com");
}
</script>
</head>
<body>
<p>This redirect allows back navigation.</p>
<button onclick="redirectWithAssign()">Redirect with Assign</button>
</body>
</html>
Using window.location.replace()
This method replaces the current page in browser history, preventing users from navigating back:
<html>
<head>
<script>
function redirectWithReplace() {
window.location.replace("https://www.tutorialspoint.com");
}
</script>
</head>
<body>
<p>This redirect replaces current page in history.</p>
<button onclick="redirectWithReplace()">Redirect with Replace</button>
</body>
</html>
Automatic Redirect with Delay
You can also redirect automatically after a specified time using setTimeout():
<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>
Comparison of Redirect Methods
| Method | Back Button Works? | Browser History |
|---|---|---|
window.location.href |
Yes | Creates new entry |
window.location.assign() |
Yes | Creates new entry |
window.location.replace() |
No | Replaces current entry |
Common Use Cases
- Form submission: Redirect after successful form processing
- Authentication: Redirect to login page or dashboard
- Error handling: Redirect to error pages
- Mobile detection: Redirect to mobile-optimized versions
Conclusion
JavaScript page redirection is essential for user navigation and flow control. Use window.location.href for standard redirects, replace() when you don't want back navigation, and setTimeout() for delayed redirects.
2K+ Views
