To redirect to another webpage in JavaScript, you can use one of the following methods:
1. window.location.href
The most common way to redirect to a new URL.
// Redirect immediately
window.location.href = "https://example.com";
2. window.location.replace()
Redirect and replace the current page in history (prevents the user from navigating back):
window.location.replace("https://example.com");
3. window.location.assign()
Similar to href
but explicitly calls a function:
window.location.assign("https://example.com");
Key Differences
Method | Behavior |
---|---|
window.location.href | Adds the current page to the browser history (user can press “Back”). |
window.location.replace() | Replaces the current page in history (user cannot go back). |
window.location.assign() | Same as href but uses a function call. |
4. Redirect After a Delay
Use setTimeout
to redirect after a specific time (e.g., 3 seconds):
setTimeout(() => {
window.location.href = "https://example.com";
}, 3000); // 3000 ms = 3 seconds
5. HTML Meta Tag (Alternative)
While not JavaScript, you can also redirect using a <meta>
tag in HTML:
<meta http-equiv="refresh" content="5; url=https://example.com">
<!-- Redirects after 5 seconds -->
Example Workflow
// Redirect to a login page if the user is not authenticated
if (!isLoggedIn) {
window.location.href = "/login.html";
}
Notes
- Security: Client-side redirects can be blocked by browsers or extensions.
- Server-Side Redirects: For permanent or SEO-friendly redirects, use HTTP status codes (e.g.,
301
,302
) via server configurations.
By choosing the right method, you can control navigation behavior in your web app!