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.

Example

To redirect a URL using JavaScript, the code is as follows ?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
 body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
</style>
</head>
<body>
<h1>JavaScript Redirect a URL</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to redirect the url to www.google.com
</h3>
<script>
 document.querySelector('.Btn').addEventListener('click',()=>{
window.location.href = 'https://www.google.com';
 })
</script>
</body>
</html>

Output

On clicking the ?CLICK HERE' button ?

How It Works?


This command will change the current page's URL to the one specified in the string. The browser will reload 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() 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.

Example

To redirect a URL using JavaScript, the code is as follows ?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redirect with window.location.replace</title>
</head>
<body>
    <button id="replaceButton">Go to Example.com (Replace)</button>

    <script>
        document.getElementById("replaceButton").addEventListener("click", function() {
            // Redirect the user and replace the current page in the history
            window.location.replace("https://www.example.com");
        });
    </script>
</body>
</html>

Output

On clicking the ?CLICK HERE' button ?

Updated on: 2024-12-06T01:40:50+05:30

568 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements