How to redirect to another webpage using JavaScript?

There are several methods to redirect to another webpage using JavaScript. Some of them are listed below:

Syntax:

location.href="URL"
      or
location.replace("URL")
      or
location.assign("URL")

Parameters: It accepts single parameter URL which is required. It is used to specify the reference of new webpage.



Return Value: No return value.

  • Example 1: This example illustrates the use of location.href property.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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.wikipedia.org/";
             }
          </script>
       </body>
    </html>

    chevron_right

    
    

    Output:
    Before clicking click me button:

    After clicking click me button: The Wikipedia page will be opened.

  • Example 2: This is the example of location.replace() method.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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.wikipedia.org/");
             }
          </script>
       </body>
    </html>

    chevron_right

    
    

    Output:
    Before clicking click me button:

    After clicking click me button: The Wikipedia page will be opened.

  • Example 3: This example uses location.assign() method.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html> 
    <html
      
    <head
        <title>
            Location assign() Method
        </title
    </head
      
    <body
        <h1>GeeksforGeeks</h1
        <h2>Location assign() Method</h2
      
        <button onclick="load()">Click Here!</button
          
        <!-- Script to use Location assign() Method -->
        <script
            function load() { 
                location.assign("https://ide.geeksforgeeks.org/index.php"); 
            
        </script
    </body
      
    </html>             

    chevron_right

    
    

    Output:

    • Before Clicking the button:
    • After Clicking the button:

NOTE: The output of all the methods will be same but location.replace() method removes the URL of current document from the document history. Thus, it is good to use location.assign() method if you want the option to navigate back to the original document.

Supported Browsers: Given below the list of browser support for the above methods:-

  • Google Chrome
  • Apple Safari
  • Firefox
  • Opera
  • Edge


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.