JavaScript provides native functions that allow you to open and close browser windows, facilitating various tasks such as managing robot windows among others. These functions are useful for handling pop-up browser windows. The methods for window management include:
- open
- close
The window.open function is utilized to launch a new web page in a separate window, while the window.close function serves to terminate the web page that was initiated using the window.open function. For a comprehensive overview, let’s explore the window.open method in detail:
Window.open
The window method in JavaScript, which is predefined, serves the purpose of launching a new tab or window within the browser. Whether a new window or tab appears is contingent upon your browser's settings or the parameters provided in the window.open method.
This approach is compatible with nearly all widely-used web browsers, such as Chrome, Firefox, and others. Below is the syntax along with the parameters for the window open method -
Syntax
This function takes four parameters, all of which are optional.
window.open(URL, name, specs, replace);
Alternatively, you can utilize this function without employing the window keyword, as demonstrated below:
open(URL, name, specs, replace)
There is no difference between both syntaxes.
Parameters List
Below is the list of parameters for the window.open function. It is important to note that all parameters associated with this method are optional and function in distinct ways.
URL: This parameter of the window.open method is optional and consists of the string that represents the URL of the webpage you intend to open. In the absence of a specified URL, the function will result in the opening of a new blank window ( about:blank ).
name: This parameter allows you to specify the title of the window you intend to open. It accepts the following options:
| _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 encompasses the configurations that are divided by commas. Elements specified within this parameter must not include any spaces, for instance, width=150,height=100.
It supports several values.
Similar to the other arguments of the window.open function, this parameter is also optional. It either generates a new entry or substitutes the existing entry in the history list. It accepts two Boolean values, indicating that it can return 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
Below are several instances demonstrating the use of the window.open function to launch a new browser window or tab. By default, the provided URL will open in a new tab or window. Refer to the examples presented below:
1. open with URL parameter
This is a straightforward illustration of the window.open method, which includes a website URL within its parameters. We have implemented a button for this purpose. Upon clicking this button, the window.open function is invoked, resulting in the website being launched in a new tab of the browser.
Copy Code
<html>
<body>
Click the button to open new window <br><br>
<button onclick="window.open('https://logic-practice.com')"> Open Window </button>
</body>
</html>
This code can be written as given below -
Copy Code
<html>
<body>
<script>
function openWindow() {
window.open('https://logic-practice.com');
}
</script>
Click the button to open new window <br><br>
<button onclick="openWindow()"> Open Window </button>
</body>
</html>
Output
Upon clicking the Open Window button, the Example site will launch in a new tab within the current window.
See the screenshot below:
2. open without parameters
In this illustration, we will refrain from supplying any arguments to the window.open function, resulting in the new tab being opened within the existing 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>
Output
Upon executing the aforementioned code, a button will be generated alongside it.
Upon clicking the Open Window button, a new tab will display a blank window.
3. open with name parameters
In this instance, we will designate the parent within the name parameter. You may utilize any of the following values (parent, blank, top, etc.) when specifying 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>
Output
Run the provided code to obtain the output displayed below. This output will include a button that, when clicked, will redirect you to the new URL within the same parent window.
By clicking this button, Gmail will launch within the same parent window.
As you input various values into the second parameter, you will observe distinct outcomes based on those different inputs.
4. Define the size for the new window
In the following illustration, we will define both the height and width for the newly created window. To accomplish this, we will utilize the third argument ( specs ) in the window.open method and provide the dimensions of the window, separated by a comma, to this function. Consequently, the window will launch with the designated 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>
Output
Run the code provided above to obtain the output as specified below. This will include a button that, when clicked, will navigate to the new URL within the same parent window.
Upon clicking this button, a new empty window will be generated beneath the parent window, maintaining the specified dimensions.
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
It is possible to display custom text or a form in a newly created window when a button is clicked. To accomplish this, we must assign a name to the new window and input the desired text within it. This designated name will be utilized in the window.open function. Refer to the following code snippet to see the implementation in action.
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>
Output
Run the provided code to obtain the output displayed below. It will feature a button that, when clicked, will redirect to the new URL within the same parent window.
Upon clicking this button, a new window will emerge displaying a custom message beneath the main window, which will have dimensions of 300 by 150 pixels.
JavaScript provides a native method called close that is utilized to close the browser window.
Close the window opened by window.open
In this demonstration, we will illustrate the process of closing a window or tab that has been launched using the window.open method. Initially, we will open a specified website URL in a new window (dimensions set in the code) by clicking a button, and subsequently, we will employ a different button to close the newly opened window. Refer to the code below to see how this can be accomplished:
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(
"", "_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 Example tutorial site </b><br>
<button onclick="windowOpen()"> Open Website </button>
<br><br>
<b> Click the button to close Example tutorial site </b><br>
<button onclick="windowClose()"> Close Website </button>
</body>
</center>
</html>
Output
Upon executing the code, you will receive the output displayed below:
To access the Example tutorial website, please click the Open Website button. We have predetermined the dimensions (both height and width) of the new pop-up window that will be displayed.
Upon clicking the Close Website button, the currently 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.
The window.open method can be utilized and executed in the browsers mentioned above.