JavaScript includes a built-in method called close that is utilized to terminate a browser window that was initiated through the window.open function. In contrast to the window.open method, it does not accept any parameters. The window.close method effectively closes the window or tab that was opened using the window.open method.
Keep in mind that it is essential to declare a global JavaScript variable to store the value that is returned by the window.open function. This variable will be utilized later by the close function to terminate the window that was opened.
Syntax
window.close()
In this context, "window" refers to the identifier for the window that is created through the window open function.
Parameters List
This method does not have any parameters.
Close the window
To illustrate this concept, let’s consider a practical example. We will use a scenario to demonstrate how to effectively close a window or tab that has been opened using the window.open method.
To begin with, we will initiate a website URL in a new window (with dimensions specified in the code) triggered by a button click, and subsequently, we will utilize another button to close that newly opened window.
Example
In this illustration, we will refrain from providing any URL within the open method. Observe the code below to understand its functionality:
Copy Code
<html>
<script>
var newWindow;
function openWindow() {
newWindow = window.open("", "myWindow", "width=200,height=100");
newWindow.document.write("<p>It is my 'newWindow'</p>");
}
function closeWindow() {
newWindow.close();
}
</script>
<h3 style="color:brown"> Close Window Example </h3>
<body>
<button onclick="openWindow()">Open New Window</button>
<br><br>
<button onclick="closeWindow()">Close New Window </button>
</body>
</html>
Output
You will receive the output identical to what is provided below. In this instance, clicking the Open New Window button will launch a browser window that is defined by the user.
A new window will appear displaying a message, similar to the one illustrated below. Next, click on the Close New Window button to dismiss this pop-up window.
Example 2
In this illustration, we will incorporate a website URL within the window.open function to launch a website in a separate window. Subsequently, we will employ the close function to terminate that window.
Copy Code
<html>
<head>
<title> Open and close window method example </title>
<script>
var newWindow;
// function to open the new window tab with specified size
function windowOpen() {
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:
Click on the Open Website button to access the Example tutorial website. We have defined the dimensions (height and width) of the new pop-up window that will appear.
Clicking the Close Website button will cause the currently open window to be minimized.
Browser Support
Several web browsers support this window function, such as:
- Chrome
- Mozilla Firefox
- Internet Explorer (IE)
- Opera
- Safari, etc.
The window.close function in JavaScript can be executed on the aforementioned web browsers.