Open In App

Redirect to another webpage using JavaScript

Improve
Improve
Like Article
Like
Save
Share
Report

To redirect to another webpage using JavaScript, you can utilize the window.location.href property or the location.replace() method.

Below are the methods used to redirect to another webpage using JavaScript:

Using location.href to redirect to another webpage

The Location href property in HTML is used to set or return the complete URL of the current page. The Location href property can also be used to set the href value point to another website or point to an email address. The Location href property returns a string that contains the entire URL of the page, including the protocol. 

location.href Syntax:

location.href="URL"

location.href to redirect to another webpage Example:

This example illustrates the use of the location.href property.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2>Welcome to GeeksforGeeks</h2>
    <p>This is the example of <i>location.href</i> way. </p>
  
    <button onclick="myFunc()">Click me</button>
  
    <!--script to redirect to another webpage-->
    <script>
        function myFunc() {
            window.location.href = "https://www.geeksforgeeks.org/";
        }
    </script>
</body>
  
</html>


Output: 

location.href to redirect to another webpage Output

location.href to redirect to another webpage Output

Explanation:

This HTML code displays a button labeled “Click me”. When clicked, it triggers the `myFunc()` JavaScript function, which redirects the user to the webpage specified by the URL “https://www.geeksforgeeks.org/” using `window.location.href`. The paragraph above the button explains this functionality.

Using location.replace() to redirect to another webpage

The DOM Location replace() Method in HTML is used to replace the current document with the specified one. This method is different from the assign() method as this removes the current document from the document history, therefore it is not possible to go back to the previous document using the ‘back’ button. 

location.replace() Syntax:

location.replace("URL");

location.replace() to redirect to another webpage Example

This is an example of a location.replace() method.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2>Welcome to GeeksforGeeks</h2>
    <p>This is the example of <i>location.replace</i> method. </p>
  
    <button onclick="myFunc()">Click me</button>
  
    <!--script to redirect to another webpage-->
    <script>
        function myFunc() {
            location.replace("https://www.geeksforgeeks.org/");
        }
    </script>
</body>
  
</html>


Output:

location.replace() to redirect to another webpage Output

location.replace() to redirect to another webpage Output

Explanation:

This HTML code displays a button labeled “Click me”. When clicked, it triggers the `myFunc()` JavaScript function, which redirects the user to the webpage specified by the URL “https://www.geeksforgeeks.org/” using the `location.replace()` method. The paragraph above the button explains this functionality. Unlike `window.location.href`, `location.replace()` does not create a new entry in the browser’s history, effectively replacing the current page.

Redirect to another webpage – UseCase:

1. How to redirect to a relative URL in JavaScript?

To redirect to a relative URL in JavaScript, you could use window.location.href. It is a property in JavaScript that represents the complete URL of the current page. It can be used to get the current URL or to navigate to a new URL by assigning a new URL to it.

2. How to Redirects to Another WebPage if User Idle for 10 Seconds in JavaScript

We will use JavaScript to redirect the web page to another web page if the user is ideal for 10 seconds.

3. How to redirect browser window back using JavaScript ?

There are two approaches used to redirect the browser window back:



Last Updated : 28 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads