How To redirect to another webpage in JavaScript? – Definitive Guide

In Web, URL is the mechanism used for any browser to retrieve a published resource(page).

To redirect a page to another web page, you will require a new URL value assigned to the current locationwindow.location.href = "https://techmam.com"

HTML DOM has location interface to represent the location(URL) of the object it is linked.

Location interface stays as a property in window and document interfaces to provide the information about the current location of the document.

Both window.location and document.location behaves similar, but it is always recommended to use window.location for cross-browser safety.

If you are in a hurry
You can update the windows.location.href web property to redirect to another webpage.
Code

<!DOCTYPE  html>
<html>
    <head>
        <title>TechMam: Redirect to another Webpage using href property</title>
        <script>
            function  usingHref() {
                console.log("window.location.href")     //prints the current url
                window.location.href = "https://techmam.com";
            }
        </scirpt>
    </head>
    <body>
        <button  onclick="usingHref()">usinghref</button>
    </body>
</html>

You can learn about getting the current URL and URL structure by referring to How To Get The Current URL In Javascript

There are a couple of other ways to redirect to another webpage; let us see those in detail.

Using window.location.href property

The href property of the location interface is a string containing the whole URL, and it allows you to update the href property to redirect to a new page.
Code

<!DOCTYPE  html>
<html>
    <head>
        <title>TechMam: Redirect to another Webpage using href property</title>
        <script>
            function  usingHref() {
                alert("window.location.href")     //shows the current url
                window.location.href = "https://techmam.com";
            }
        </scirpt>
    </head>
    <body>
        <button  onclick="usingHref()">usinghref</button>
    </body>
</html>

In the above example, the user clicks the button will trigger the onClick method(usingHref). In the method ,you can see a new URL value(“https://techmam.com”) is assigned to the window.location.href property.
This action will redirect the browser to another page assigned to the href attribute.

Using window.location.replace()

The replace() method in the location interface is also used to redirect to another webpage.
The difference this makes with other options is that after using replace(), the current page will not be saved in the session history, which restricts the user from returning to the previous page.
Code

<!DOCTYPE  html>
<html>
    <head>
        <title>TechMam: Redirect to another Webpage using replace method</title>
        <script>
            function  usingReplace() {
                alert("window.location.href")     //shows the current url
                window.location.replace("https://techmam.com");
            }
        </scirpt>
    </head>
    <body>
        <button  onclick="usingReplace()">usingReplace</button>
    </body>
</html>

Note:
A DOMException of the SYNTAX_ERROR type is thrown in the below scenario,

  • If the provided URL is not valid.
  • If the assignment can’t happen because of a security violation. This mostly happens if the origin(domain name) of the calling script is different from the page’s origin.

Using window.location.assign()

The assign() method makes the window load and displays the document specified in the URL.
Once the navigation completes, the user can navigate back to the page called the assign() method by clicking the back button.

Code

<!DOCTYPE  html>
<html>
    <head>
        <title>TechMam: Redirect to another Webpage using assign method</title>
        <script>
            function  usingAssign() {
                alert("window.location.href")     //shows the current url
                window.location.assign("https://jsowl.com");
            }
        </scirpt>
    </head>
    <body>
        <button  onclick="usingAssign()">usingAssign</button>
    </body>
</html>

Note:
A DOMException of the SYNTAX_ERROR type is thrown in the below scenario,

  • If the provided URL is not valid.
  • If the assignment can’t happen because of a security violation. This mostly happens if the origin(domain name) of the calling script is different from the page’s origin.

Using window.location.history

The History interface allows users to manipulate the browser session history, including the pages visited in a frame that the current page loaded in or in the tab.

The History interface does not inherit any method or properties.

  • Using back() This asynchronous method loads the previous page in the session history when the user clicks the browser’sback button, which is equivalent to history. go(-1). Note: This method has no effect or does not throw an exception when called to go back beyond the first page.
  • Using go() This asynchronously loads a page from the session history based on the relative position to the current page. Parameters history.go(1) - takes to next page history.go(-1) - takes back to previous page. history.go() - reloads the current page. Note: This method has no effect or does not throw an exception when called to go an out-of-bound value.
  • Using forward() This asynchronous method loads the next page in the session history when the user clicks the browser’sforward button, which is equivalent to history. go(1). Note: This method has no effect or does not throw an exception when called to go forward beyond the most recent page.

Code

<!DOCTYPE  html>
<html>
    <head>
        <title>TechMam: Redirect to another Webpage using history methods/title>
        <script>
            function  usingHistory() {
                alert("window.location.href")     //shows the current url
                window.history.go(-1);
            }
        </scirpt>
    </head>
    <body>
        <button  onclick="usingHistory()">usingHistory</button>
    </body>
</html>

You can go one step back to the previous page using the above code. If you are on the first page, then it won’t have any effect on the back button.
Likewise, you can try out the other options of the history interface(forward and specific page).

Summary

You have learned how to redirect to another webpage, which is a common action while working with web pages.

You have also learnt about multiple ways like localtion.href, location.replace(), location.assign() and location.history() to redirect to another webpage.

You May Also Like

Leave a Comment