JavaScript window.close
last modified April 2, 2025
In this article, we explore the window.close method in
JavaScript. This method allows developers to programmatically close
browser windows or tabs.
Basic Definition
The window.close method closes the current window or a window
that was opened by JavaScript. This method can only close windows that
were opened by scripts.
For security reasons, browsers restrict closing windows that weren't created by JavaScript. The method has no effect on windows opened by users directly.
Basic window.close
This example demonstrates how to close the current window with a button.
<!DOCTYPE html>
<html>
<head>
<title>Basic window.close</title>
</head>
<body>
<button onclick="closeWindow()">Close Window</button>
<script>
function closeWindow() {
window.close();
}
</script>
</body>
</html>
In this basic example, we have a button that triggers the
closeWindow function. The function calls
window.close() to attempt closing the current window.
Note that this will only work if the window was opened by JavaScript. Most browsers will prevent closing windows opened directly by users.
Closing a Newly Opened Window
This example shows how to open and then close a window programmatically.
<!DOCTYPE html>
<html>
<head>
<title>Open and Close Window</title>
</head>
<body>
<button onclick="openNewWindow()">Open Window</button>
<button onclick="closeNewWindow()">Close Window</button>
<script>
let newWindow;
function openNewWindow() {
newWindow = window.open('', '_blank', 'width=400,height=300');
newWindow.document.write('<h1>New Window</h1>');
}
function closeNewWindow() {
if (newWindow) {
newWindow.close();
}
}
</script>
</body>
</html>
Here we have two buttons - one to open a new window and another to close
it. The window.open method creates a new window, and we store
its reference in the newWindow variable.
The closeNewWindow function checks if the window exists and
then calls close() on the window reference. This will work
because we created the window with JavaScript.
Closing Window After Delay
This example demonstrates closing a window automatically after a delay.
<!DOCTYPE html>
<html>
<head>
<title>Delayed Window Close</title>
</head>
<body>
<h1>This window will close in 5 seconds</h1>
<script>
setTimeout(function() {
window.close();
}, 5000);
</script>
</body>
</html>
In this example, we use setTimeout to schedule the window
closure after 5000 milliseconds (5 seconds). The anonymous function
calls window.close() when the timer expires.
This technique can be useful for temporary notification windows or after completing specific tasks. Remember it only works for windows opened by JavaScript.
Closing Window with Confirmation
This example shows how to ask for confirmation before closing a window.
<!DOCTYPE html>
<html>
<head>
<title>Confirm Window Close</title>
</head>
<body>
<button onclick="tryCloseWindow()">Close Window</button>
<script>
function tryCloseWindow() {
if (confirm('Are you sure you want to close this window?')) {
window.close();
}
}
</script>
</body>
</html>
Here we use the confirm dialog to get user confirmation
before attempting to close the window. The confirm function
returns true if the user clicks OK.
This pattern provides a better user experience by preventing accidental window closures. It's especially useful when the window contains unsaved data.
Closing Parent Window from Child
This example demonstrates closing the parent window from a child window.
<!DOCTYPE html>
<html>
<head>
<title>Parent Window</title>
</head>
<body>
<button onclick="openChildWindow()">Open Child Window</button>
<script>
function openChildWindow() {
const child = window.open('child.html', '_blank', 'width=400,height=300');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Child Window</title>
</head>
<body>
<button onclick="closeParent()">Close Parent Window</button>
<script>
function closeParent() {
if (window.opener && !window.opener.closed) {
window.opener.close();
}
window.close();
}
</script>
</body>
</html>
In this example, the parent window opens a child window. The child window has a button that attempts to close both itself and its parent.
The window.opener property references the window that opened
the current window. We check if it exists and isn't already closed before
calling close() on it.
Source
MDN window.close Documentation
In this article, we have shown how to use window.close
in JavaScript. This method is useful for managing browser windows
in web applications.
Author
List all JS DOM tutorials.