JavaScript Window open method

JavaScript offers in-built methods to open and close the browser window to perform additional operations like robot window etc. These methods help to open or close the browser window pop-ups. Following are the window methods:

open()
close()

The window.open method is used to open a new web page into a new window and window.close method to close web page opened by window.open method. See the window.open() method in detail:

Window.open()

It is a pre-defined window method of JavaScript used to open the new tab or window in the browser. This will depend on your browser setting or parameters passed in the window.open() method that either a new window or tab will open.

This method is supported by almost all popular web browsers, like Chrome, Firefox, etc. Following is the syntax and parameters of the window open method –

Syntax

This function accepts four parameters, but they are optional.

You can also use this function without using the window keyword as shown below:

There is no difference between both syntaxes.

Parameters List

Below is the parameters list of window.open() method. Note that – all parameters of this method are optional and works differently.

URL: This optional parameter of the window.open() function contains the URL string of a webpage, which you want to open. If you do not specify any URL in this function, it will open a new blank window (about:blank).

name: Using this parameter, you can set the name of the window you are going to open. It supports the following values:

_blank	Passed URL will load into a new tab/window.
_parent	URL will load into the parent window or frame that is already opened.
_self	By passing this parameter, the URL will replace the previous output and a new window will open in the same frame.
_top	URL replaces any frameset that can be loaded.
Name	Provide the name of the new window to show the text or any data on it. (Note – not the title of the window)

The above-specified values are passed inside a single or double quote to the window.open() function at the name parameter place.

specs: This parameter contains the settings that are separated by the comma. Element used in this parameter cannot have whitespaces, e.g., width=150,height=100.

It supports several values.

replace: Like the other parameters of window.open() method, this is also an optional parameter. It either creates a new entry or replaces the current entry in history list. It supports two Boolean values; this means that it returns either true or false:

True	Return true if URL replaces the current entry or document in history list.
False	Return false if URL creates a new entry in history list.

Return Values

It will return a newly opened window.

Examples

Here are some examples of window.open() function to open the browser window/tab. By default, the specified URL opens in new tab or window. See the examples below:

1. open() with URL parameter

This is a simple example of window open method having a website URL inside it. We have used a button. By clicking on this button, window.open() method will call and open the website in new browser tab.

Copy Code

  <html>  <body>  Click the button to open new window <br><br>  <button onclick=”window.open(‘https://tutoraspire.com’)”> Open Window </button>    </body>  </html>  

Test it Now

This code can be written as given below –

Copy Code

  <html>  <body>  <script>  function openWindow() {  window.open(‘https://tutoraspire.com’);  }  </script>    Click the button to open new window <br><br>  <button onclick=”openWindow()”> Open Window </button>  </body>  </html>  

Test it Now

Output

When you click on this Open Window button, tutoraspire site will open in a new tab inside the same window.

JavaScript Window open method

See the screenshot below:

JavaScript Window open method

2. open() without parameters

In this example, we will not pass any parameter to window.open() function so that the new tab will open in previous window.

Copy Code

  <html>  <body>  <script>  function openWindow() {  window.open();  }  </script>    Click the button to open new window <br><br>  <button onclick=”openWindow()”> Open Window </button>  </body>  </html>  

Test it Now

Output

When you will execute the above code, a button will appear with it.

JavaScript Window open method

When you click this Open Window button, a blank window will open in a new tab.

JavaScript Window open method

3. open() with name parameters

In this example, we will specify the _parent at the name parameter. You can pass any of these values (_parent, _blank, _top, etc.) in it.

Copy Code

  <html>  <script>  function openWindow() {  window.open(‘https://gmail.com’, ‘_parent’);  }  </script>    <body>  <b> Click the button to open new window in same tab </b>   <br><br>  <button onclick=”openWindow()”> Open Window </button>  </body>  </html>  

Test it Now

Output

Execute the code and get the output as given below. This will contain a button to click and open the new URL on the same parent window.

JavaScript Window open method

When you click this button, Gmail will open under the same parent window.

JavaScript Window open method

When you will pass the different values in second parameter, you will see the difference for different values.

4. Define the size for the new window

In this example, we will specify the height and width for the new window. For this, we will use the third parameter (specs) in window.open() method and pass the height and width of the window separated by a comma to this function. So, the window will open in the specified size.

Copy Code

  <html>  <script>  function openWindow() {  window.open(“”, “”, “width=300,height=200″);  }  </script>    <body>  <b> Click the button to open new window in same tab </b>   <br><br>  <button onclick=”openWindow()”> Open Window </button>  </body>  </html>  

Test it Now

Output

Execute the above code and get the output as given below. This will contain a button to click and open the new URL on the same parent window.

JavaScript Window open method

When you click this button, a new blank window will open under the parent window of size.

JavaScript Window open method

Note that you can also pass the URL to the window.open() method to open any website.

Open new window with a name and having a message

We can show any user-defined text or form in new window that we are going to open on button click. For this, we need to provide any name to the new window and write some text into it. This name will pass to the window.open() method. See the code below how it will implement with actual coding.

Copy Code

  <html>  <script>  function openWindow() {  var newtab = window.open(“”, “anotherWindow”, “width=300,height=150”);  newtab.document.write(“<p> This is ‘anotherWindow’. It is 300px wide and 150px tall new window! </p>”);  }  </script>    <body>  <b> Click the button to open the new user-defined sized window </b>   <br><br>  <button onclick=”openWindow()”> Open Window </button>  </body>  </html>  

Test it Now

Output

Execute the code and get the output as given below. It will contain a button to click and open the new URL on the same parent window.

JavaScript Window open method

When you click this button, a new window will open with a user-defined message under the parent window of size 300*150.

JavaScript Window open method

JavaScript also offers the in-built method, i.e., close() to close the browser window.

Close the window opened by window.open()

In this example, we will show you how to close the window or tab opened by the window.open() method. Firstly, we will open a website URL in a new window (size defined in code) using a button click and then use another button to close that opened window. See the below code how it will be done:

Copy Code

  <html>   <head>   <title> Open and close window method example </title>   <script>      // function to open the new window tab with specified size      function windowOpen() {            var newWindow = window.open(                 “https://tutoraspire.com/”, “_blank”, “width=500, height=350″);       }          // function to close the window opened by window.open()      function windowClose() {            newWindow.close();      }   </script>   </head>     <center>  <h2 style=”color:green”> Window open() and close() method </h2>  <body>       <b> Click the button to open tutoraspire tutorial site </b><br>      <button onclick=”windowOpen()”> Open tutoraspire </button>      <br><br>       <b> Click the button to close tutoraspire tutorial site </b><br>      <button onclick=”windowClose()”> Close tutoraspire </button>   </body>   </center>  </html>  

Test it Now

Output

When you will execute the code, you will get the response as shown below:

JavaScript Window open method

Click the Open tutoraspire button to open the tutoraspire tutorial website. We have specified the size (height and width) of the new pop-up window to open.

JavaScript Window open method

If you click the Close tutoraspire button, this opened window will be minimized.

Browser Support

Several web browsers support the window.open() method, such as:

Chrome
Mozilla Firefox
Internet Explorer (IE)
Opera
Safari, etc.

You can use and run the window.open() method on these above browsers.

Note: You can use the close() method of JavaScript to close the opened browser window or tab open by window.open(). We will discuss it in the next chapter in more detail.

Next TopicJavaScript Window close method

JavaScript Window open method

JavaScript Window open method

Window.open()

Syntax

Parameters List

Return Values

Examples

1. open() with URL parameter

2. open() without parameters

3. open() with name parameters

4. Define the size for the new window

Note that you can also pass the URL to the window.open() method to open any website.

Open new window with a name and having a message

Close the window opened by window.open()

Browser Support

Note: You can use the close() method of JavaScript to close the opened browser window or tab open by window.open(). We will discuss it in the next chapter in more detail.

JavaScript try-catch

JAXB Marshalling Example | Convert Object to XML in Java

You may also like