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 redirect to another webpage using JavaScript?
The window.location object contains the current location or URL information. We can redirect users to another webpage using the properties of this object. The window prefix is optional and can be omitted.
JavaScript provides three main methods to redirect users to another webpage:
location.href - Sets or returns the complete URL of the current page
location.replace() - Replaces the current document with a new one (no back button history)
location.assign() - Loads a new document (keeps back button history)
Syntax
location.href = "url";
location.replace("url");
location.assign("url");
Parameters
url - The URL of the target webpage to redirect to.
Using location.href
The location.href property is the most common way to redirect. It allows users to navigate back using the browser's back button.
<!DOCTYPE html>
<html>
<head>
<title>Redirect Example</title>
</head>
<body>
<h3>Redirect using location.href</h3>
<p>Click the button to redirect to TutorialsPoint.</p>
<button onclick="redirectWithHref()">Redirect Me</button>
<script>
function redirectWithHref() {
location.href = "https://www.tutorialspoint.com";
}
</script>
</body>
</html>
Using location.replace()
The location.replace() method replaces the current page in the browser history. Users cannot navigate back to the previous page using the back button.
<!DOCTYPE html>
<html>
<head>
<title>Replace Example</title>
</head>
<body>
<h3>Redirect using location.replace()</h3>
<p>Click the button to replace current page.</p>
<button onclick="replaceLocation()">Replace Page</button>
<script>
function replaceLocation() {
location.replace("https://www.tutorialspoint.com");
}
</script>
</body>
</html>
Using location.assign()
The location.assign() method loads a new document while maintaining browser history, similar to location.href.
<!DOCTYPE html>
<html>
<head>
<title>Assign Example</title>
</head>
<body>
<h3>Redirect using location.assign()</h3>
<p>Click the button to assign new location.</p>
<button onclick="assignLocation()">Assign Location</button>
<script>
function assignLocation() {
location.assign("https://www.tutorialspoint.com");
}
</script>
</body>
</html>
Comparison of Methods
| Method | Browser History | Back Button Works | Use Case |
|---|---|---|---|
location.href |
Preserved | Yes | Normal navigation |
location.replace() |
Replaced | No | Security redirects |
location.assign() |
Preserved | Yes | Programmatic navigation |
Immediate Redirect Example
You can also redirect immediately when the page loads:
<!DOCTYPE html>
<html>
<head>
<title>Immediate Redirect</title>
</head>
<body>
<p>Redirecting in 3 seconds...</p>
<script>
setTimeout(function() {
location.href = "https://www.tutorialspoint.com";
}, 3000);
</script>
</body>
</html>
Conclusion
Use location.href for normal redirects, location.replace() when you don't want users to go back, and location.assign() for programmatic navigation. Choose the method based on your specific use case and user experience requirements.
22K+ Views
