Redirect to another webpage using JavaScript

How to redirect browser window back using JavaScript ?

Redirecting to another webpage using JavaScript enables dynamic navigation within web applications. By manipulating the window.location object, specifically its href property, developers can seamlessly guide users to different URLs based on various conditions or user interactions, enhancing user experience and application functionality.

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

Table of Content

Using location.href
Using location.replace()

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.

Syntax:

location.href="URL"

Example: This examplewe 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.w3wiki.net/” using `window.location.href`. The paragraph above the button explains this functionality.

HTML

<!DOCTYPE html>
<html>

<body>
    <h2>Welcome to w3wiki</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.w3wiki.net/";
        }
    </script>
</body>

</html>

Output:

location.href to redirect to another webpage Output

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.

Syntax:

location.replace("URL");

Example : In this example we contains a button triggering a JavaScript function. When clicked, it invokes location.replace() to redirect the user to the w3wiki website.

HTML

<!DOCTYPE html>
<html>

<body>
    <h2>Welcome to w3wiki</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.w3wiki.net/");
        }
    </script>
</body>

</html>

Output:

location.replace() to redirect to another webpage Output

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:

Tags:

#JavaScript-Questions #JavaScript #Web Technologies