In this section, we will learn what the window open() method is and how to use it in JavaScript.

JavaScript Window open() Method: (pop-up window)

When we want to programmatically navigate to a new URL and open it in a new browser window (or a new tab depending on the default setting of the target browser), we can use the `open()` method.

Window open() Method Syntax:

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

Window open() Method Parameter:

The method takes 4 arguments:

• The first argument is the URL to load.
• The second argument is the window target. Values like `_self`, `_parent`, `_top`, or `_blank` can be used here. Also, if there’s a window already exist, we can use its name as the second argument to the `open()` method.
• The third argument is a string of settings for the opened browser window (Like disabling or enabling Toolbar, the location bar etc.). Basically, the third argument is a comma-delimited string of settings indicating how the new window should appear.

Notes:

1. WE CANNOT PUT WHITE SPACE IN THE STRING OF SETTINGS.
2. When we’re not opening a new window, this third argument is ignored.
3. In the table below, we’ve specified these settings.

• The last argument is a Boolean value indicating that the new page should take the place of the currently loaded page in the browser history.

Here’s the list of settings that can be used in the string value of the third argument of the `open()` method.

Setting	Value(s)	Description
fullscreen	“yes” or “no”	Indicates that the browser window should be maximized when created. Internet Explorer only.
height	Number	The initial height of the new window. This cannot be less than 100.
left	Number	The initial left coordinate of the new window. This cannot be negative number.
location	“yes” or “no”	Indicates if the location bar should be displayed. The default varies based on the browser. When set to “no”, the location bar may be either hidden or disabled (browser-dependent).
menubar	“yes” or “no”	Indicates if the menu bar should be displayed. The default is “no”.
resizable	“yes” or “no”	Indicates if the new window can be resized by dragging its border. The default is “no”.
scrollbars	“yes” or “no”	Indicates if the new window allows scrolling if the content cannot fit in the viewport. The default is “no”.
status	“yes” or “no”	Indicates if the status bar should be displayed. The default varies based on the browser.
toolbar	“yes” or “no”	Indicates if the toolbar should be displayed. The default is “no”.
top	Number	The initial `top` coordinate of the new window. This cannot be a negative number.
width	Number	The initial width of the new window. This cannot be less than 100.

The table is taken from the “Professional JavaScript for Web Developers, 4^th Edition”.

Any or all of the settings mentioned above can be used in the string value of the third argument.

Remember: we put comma `,` to separate each setting from the other.

Also, all the arguments mentioned above are optional and we can simply call the `open()` method without any argument. In such case it will open a blank window.

Window open() Method Return Value:

The return value of this method is a reference to the newly created window. The object basically is the same as the `window` object except now we have the control over the opened window.

Example: JavaScript open link in new tab

window.open("https://www.google.com","searchEngine");

setTimeout(()=>{

window.open("https://www.bing.com","searchEngine");

},4000)

Here first we’ve opened a new window to access the Google website and named the window `searchEngine`. (Note: because there’s no other window currently opened with this name, the engine will open a new one with such name).

After 4 seconds, another `open()` method will be executed with the target window of `searchEngine`. Now because we already have such window, the engine will use it to load the website bing.com there in that window.

Example: JavaScript open url in new tab

const wing = window.open("https://www.google.com","searchEngine", "height=500,width=500,top=20,left=30,resizable=yes");

Here, the height and width of the opened window is 500 pixels, the distance of this window from the top and left of the screen is 20 and 30 pixels, respectively. Also, the opened window is re-sizable.

Example: JavaScript open in new window

const wing = window.open("https://www.google.com","searchEngine", "height=500,width=500,top=20,left=30,resizable=yes");

setTimeout(()=>{

wing.close();

console.log("The window is closed");

},4000)

Output:

(After 4 seconds): The window is closed

Here, we used the returned object of the `open()` method to close the window after 4 seconds via the `close()` method.

Reference Book:

Professional JavaScript for Web Developers, 4^th Edition

Author: Matt Frisbie