Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Window closed Property
The HTML DOM Window closed property returns a boolean value that indicates whether a window reference is closed or not. This property is particularly useful when working with popup windows opened using window.open(), allowing you to check their state before performing operations.
Syntax
Following is the syntax for the Window closed property −
window.closed
Return Value
The closed property returns −
true − If the window is closed or was never opened
false − If the window is currently open
Note: For the main browser window, this property always returns false since the main window cannot be closed programmatically by scripts from the same origin.
Example − Basic Window Closed Check
Following example demonstrates how to check if a popup window is closed −
<!DOCTYPE html>
<html>
<head>
<title>Window Closed Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Window Closed Property Demo</h2>
<button onclick="openPopup()">Open Popup</button>
<button onclick="checkStatus()">Check Status</button>
<button onclick="closePopup()">Close Popup</button>
<p id="status">No popup opened yet.</p>
<script>
let popup;
function openPopup() {
popup = window.open("", "popup", "width=300,height=200");
popup.document.write("<h3>This is a popup window</h3>");
document.getElementById("status").textContent = "Popup opened.";
}
function checkStatus() {
const statusEl = document.getElementById("status");
if (!popup) {
statusEl.textContent = "No popup reference exists.";
} else if (popup.closed) {
statusEl.textContent = "Popup is closed.";
} else {
statusEl.textContent = "Popup is open.";
}
}
function closePopup() {
if (popup && !popup.closed) {
popup.close();
document.getElementById("status").textContent = "Popup closed programmatically.";
}
}
</script>
</body>
</html>
The output shows buttons to control a popup window and check its status using the closed property −
Window Closed Property Demo [Open Popup] [Check Status] [Close Popup] No popup opened yet.
Example − URL Window Manager
Following example shows a practical implementation using the closed property to manage popup windows −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window Closed Property</title>
<style>
form {
width: 70%;
margin: 20px auto;
text-align: center;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
}
input[type="url"] {
width: 300px;
padding: 8px;
margin: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
input[type="button"] {
padding: 10px 15px;
margin: 5px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
}
input[type="button"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form>
<fieldset>
<legend>Window Manager</legend>
<input id="urlSelect" type="url" placeholder="Enter URL (e.g., https://www.example.com)"><br>
<input type="button" value="Open Window" onclick="openWindow()">
<input type="button" value="Close Window" onclick="closeWindow()">
<input type="button" value="Restore Window" onclick="restoreWindow()">
<p id="windowStatus">No window opened.</p>
</fieldset>
</form>
<script>
let browseWindow;
let winSource;
function openWindow() {
const urlSelect = document.getElementById("urlSelect");
const url = urlSelect.value || "about:blank";
browseWindow = window.open(url, "browseWindow", "width=600,height=400");
winSource = url;
updateStatus();
}
function closeWindow() {
if (browseWindow && !browseWindow.closed) {
browseWindow.close();
}
updateStatus();
}
function restoreWindow() {
if (!browseWindow || browseWindow.closed) {
browseWindow = window.open(winSource || "about:blank", "browseWindow", "width=600,height=400");
} else {
browseWindow.focus();
}
updateStatus();
}
function updateStatus() {
const statusEl = document.getElementById("windowStatus");
if (!browseWindow) {
statusEl.textContent = "No window opened.";
} else if (browseWindow.closed) {
statusEl.textContent = "Window is closed.";
} else {
statusEl.textContent = "Window is open.";
}
}
// Check status periodically
setInterval(updateStatus, 1000);
</script>
</body>
</html>
This example creates a window manager that uses the closed property to track the window state and update the status message accordingly.
Browser Compatibility
The window.closed property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the DOM specification since early browser versions.
Common Use Cases
The closed property is commonly used in the following scenarios −
Popup Management − Check if a popup window is still open before sending data to it
Window Communication − Verify window state before using
postMessage()APIResource Cleanup − Clear references to closed windows to prevent memory leaks
User Interface Updates − Update button states based on window availability
Conclusion
The window.closed property is essential for managing popup windows and child windows in web applications. It returns true when a window is closed and false when it's open, allowing developers to check window states before performing operations. This property is particularly useful in scenarios involving window communication, popup management, and preventing errors when interacting with closed windows.
223 Views
