This write-up will provide guidance about the window.open() method in JavaScript.
What is window.open() in JavaScript?
In JavaScript, “window.open()” method is utilized to open up a new browser window with or without any content. This method provides control over the browser window to adjust the window height, width, and position.
How to Use window.open() in JavaScript?
To use the window.open() method in JavaScript, utilize the following syntax:
Here, “url” represents the URL address of the page that needs to be opened. If not specified, by default a blank tab or window will be opened.
Target: This assigns the window’s name in which the context is loaded. Moreover, you can also declare the following targets/options to have more control over your window:
- _blank: This is the default option in which the URL is loaded in a new tab or window.
- _parent: URL will be opened in the current working window.
- _ self: This will replace the current page with the specified URL.
- _top: This will open the URL in any loaded window
windowFeatures: This will assist you in customizing a window according to your need. It is an optional argument. The following values are supported:
- height=pixels: This demonstrates the height of the window. The unit can only be assigned in pixels (px).
- width= pixels: This option will set the width of the window.
- left= pixels: Adjust the window from the left side.
- top= pixels: Specify the top position of the window
- resizable= yes|no: This will allow the window to be resizable respectively.
- menubar= yes|no: Control the behavior of whether the menu bar will be displayed or not.
- scrollbars= yes|no: Display or hide the scrollbars on some specific browsers, such as Firefox, IE, and Opera.
- status= yes|no: Decide whether the status bar will be shown or not.
- titlebar= yes|no: Set this option to yes if you want to show the title bar; otherwise, no.
Let’s apply some values in the below example to understand how window.open() method works in JavaScript.
Example 1
In our example, we will utilize “<p>” and a “<button>” tag. <p> tag contains some text describing the button’s purpose. Next, in the <button> tag, we will set the “onclick” event and assign it a function named “xyzFunction()”. Place both tags within the <body> tag of the HTML file:
<button onclick="xyzFunction()">Click Me</button>
Inside the “xyzFunction()” of our JavaScript file, we will specify the “newWindow” as a variable. By keeping the syntax in mind, we will use the “window.open()” method along with the URL as “https://linuxhint.com” and set the height as “250” and width “400” (pixels). Use the empty “” to leave the target value empty:
var newWindow = window.open("https://linuxhint.com", "", "height=250, width=400");
}
As a result, when the added button is clicked, a new window will be opened according to the specified url:
Let’s take another example to see how the target value plays its part in the window.open() method.
Example 2
In this example, we will first discuss the purpose of the button with the help of some text:
Let’s utilize the target value as “_parent” along with the same URL and windowFeatures used in the previous example. However, specifying the _parent argument will open the link in the current frame:
var newWindow = window.open("https://linuxhint.com", "_parent", "height=250, width=400");
}
Output
We have covered in detail what is window.open() in JavaScript.
Conclusion
“window.open()” is a JavaScript predefined method that is utilized to open the new browser window with or without any content. It provides various options to control the browser’s window, such as height, width, and position. In this manual, we have explained in detail what window.open() is and how to use it in JavaScript.
