In this article, I will show you how to use the
You can call the
open() method on the browser
window object. You don't need to pass any parameter to this method because it doesn't have any required parameters.
If you call the
window.open() method as it is, the browser will open a new empty tab. But you can pass an URL string in the first parameter.
By default, when you call this method with an URL, it will open that URL in a new tab. You can change this behavior by using other parameters.
This method can accept up to 3 optional parameters. These are
features. This is the syntax you have to use to call the
// Without any parameter window.open(); // With an URL window.open(url); // With an URL and target window.open(url, target); // With an URL, target and features window.open(url, target, features);
Let's see how and what types of values you can provide to this method while calling it.
Parameters of The window.open() Method
This is the list of all optional parameters and their values:
It is a string that specifies the URL or a path that you want to open. You can give a full URL or a relative path. If you pass an empty string ("") in this place, browsers will ignore it and open a blank page.
// Full URL window.open("https://www.example.com"); // Relative URL window.open("/posts");
It determines where to display the URL. You can use all the target attributes of the HTML
<a> tag. You need to pass its value as a string.
This is the parameter that controls whether the link will open in the current tab or in the new tab. These are the most important values you need to know to use this parameter:
- _self – It opens the URL in the current tab by replacing the opened page.
- _blank – It opens the URL in a new tab. This is the default value.
- _parent – It loads the URL into the parent frame. If there is no parent, behave as _self.
- _top – It opens the URL by replacing any framesets. If no frameset, behave as _top.
You can pass any custom text other than these values if you want. It will work as the name of the window. You are able to extract your custom text from the object that
window.open() method returns.
We will look into the returned value and how you can get the text from it in the later section.
It is a comma-separated list of items without whitespaces that can customize the new window. But this parameter is rarely used. Because browsers apply these parameter values differently.
Some browsers also don't use all the values that this parameter supports. This is the list of items that you can choose for this parameter:
|height||pixels||Defines the height of the window. The minimum value is 100.|
|width||pixels||Defines the width of the window. The minimum value is 100.|
|left||pixels||It sets the left position of the new window. A negative value is not allowed.|
|top||pixels||It sets the top position of the new window. A negative value is not allowed.|
|fullscreen||yes|no|1|0||Determines whether or not the browser will display the page in full-screen mode. The default is no. Only supported by IE.|
|menubar||yes|no|1|0||Determines whether or not the browser will show the menu bar.|
|resizable||yes|no|1|0||Determines whether or not the window is resizable. Only supported by IE.|
|location||yes|no|1|0||Determines whether or not to show the address field in the new window. Only supported by Opera browser.|
|status||yes|no|1|0||Determines whether or not to show the status bar in the new window.|
|scrollbars||yes|no|1|0||Determines whether or not to show the scroll bars in the new window. Only supported by IE, Firefox & Opera browsers.|
|toolbar||yes|no|1|0||Determines whether or not to show the browser toolbar in the new window. Only supported by IE & Firefox browsers.|
|titlebar||yes|no|1|0||Determines whether or not to show the title bar in the new window. If the application is not an HTML application or a trusted dialog box, it will be ignored.|
|noopener||yes|no|1|0||When this feature is set, the new window can't access the original window using the |
|noreferrer||yes|no|1|0||When this feature is set, the browser will remove the Referer header and automatically set the |
You have learned about the
window.open() method and its parameters. Now let's see how you can use this method to open a URL in the new tab.
window.open("https://www.webmound.com/blog", "_blank", "location=yes,height=570,width=520,status=yes");
In this example, I am using all 3 parameters in the
window.open() method. I am setting an URL that I want to open. In the second parameter, I have used "_blank" because I want to open this link in the new window.
This value is responsible to open a new tab in the browser. I am also providing some features for the new window in the third parameter.
Note: If you don't pass any target or an empty string (""), the browser will use "_blank" by default and open the link in a new window.
It is very easy to open an URL in the same tab using
When the browser executes this method, it will open this URL in the current tab by replacing the current page.
Return Value From the window.open() Method
When the browser executes the
window.open() method, it will return the
window object. But if the browser fails for any reason, it will return
This method also returns a
null value if the features parameter has noopener=yes in it.
const handle = window.open("https://www.webmound.com/blog", "_blank", "noopener=yes"); console.log(handle); // null const handle2 = window.open("https://www.webmound.com/blog", "_blank"); console.log(handle2); // window object
In this example, I am calling the
window.open() method twice. I used noopener=yes in the first call. Therefore, it is returning a
But in the second call, I am not using that feature parameter. So, I am getting a
window object as the return value.
As you know, you can pass a custom string in the
target parameter. You can also get that custom string back from the
window object, returned from the
const handle = window.open("https://www.webmound.com/blog", "Web_Mound"); console.log(handle.name); // Web_Mound
I am calling the
window.open() method with the "Web_Mound" value in its second parameter. When this method returns a new
window object, I can access the
name property on that object to get the value back.
window.open() method with the URL that you want to open.
This method also has some customization options. By passing different parameter values, it is possible to modify the default behavior.
You can open your link in the same tab or in a new tab. You can also control how the new window will look by using the features parameter.