How to open URL in a new window using JavaScript ?

In HTML, the anchor tag is used to open new windows and tabs in a very straightforward manner. However, there is a need to do the same using JavaScript. In JavaScript, window.open() proves to be helpful. The window.open() method is used to open a new browser window or a new tab depending on the browser setting and the parameter values.

Syntax:

window.open(URL, name, specs, replace);

Note: All the parameters are optional.

Approach:

  • To open a URL in new window, make sure that the second parameter is not _blank.
  • The other parameters can be varied accordingly as per the need of the new window.

Example 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
  
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
  
    <p>
        Click the button to
        open a new window.
    </p>
  
    <button onclick="NewTab()">
        Open Geeksforgeeks
    </button>
  
    <script>
        function NewTab() {
            window.open("https://www.geeksforgeeks.org",
                    "", "width=300, height=300");
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before Clicking on Button:
  • After Clicking on Button:

Example 2: Use Anchor tag to open URL in a new window.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
      
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
      
    <p>
        Click the button to open
        GeeksforGeeks in a new window.
    </p>
  
    <a onclick=
    'window.open("http://www.geeksforgeeks.org/",
            "_blank", "width=300, height=300");'>
        GeeksforGeeks
    </a>
</body>
  
</html>

chevron_right


Output:

  • Before Clicking on GeeksforGeeks:
  • After Clicking on GeeksforGeeks:

Example 3: Use Input tag to open URL in a new window.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body style="text-align:center;">
      
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
      
    <p>
        Click the button to open
        GeeksforGeeks in a new window.
    </p>
  
    <input type="button"
        onclick="window.open(
        'http://www.geeksforgeeks.org/','geeks',
        'toolbars=0,width=300,height=300,left=200,
        top=200,scrollbars=1,resizable=1');" 
        value="Open the window">
</body>
  
</html>                 

chevron_right


Output:

  • Before Clicking on Button:
  • After Clicking on Button:

full-stack-img




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.