HTML DOM의 Window closed 속성은 현재 참조 중인 창(window)이 닫혀 있는지 여부를 나타내는 불리언(boolean) 값을 반환합니다. 창이 닫혀 있으면 true, 아직 열려 있으면 false를 반환합니다.
이 속성은 읽기 전용(read-only)이며, 특히 window.open()으로 연 새 창이나 팝업창의 상태를 확인할 때 유용하게 사용됩니다. 예를 들어, 이미 닫힌 창에 접근하려고 하면 오류가 발생할 수 있으므로, 작업을 수행하기 전에 closed 속성으로 창의 상태를 먼저 검사하는 것이 안전한 코딩 습관입니다.
문법(Syntax)
다음은 closed 속성의 기본 사용 문법입니다.
불리언 값 반환:
window.closed
예제(Example)
HTML DOM Window closed 속성의 실제 동작을 확인할 수 있는 예제입니다. 이 예제에서는 URL을 입력받아 새 창을 열고(Go To), 닫은 후(Close), closed 속성을 활용해 다시 복원하는(Restore) 과정을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window closed</title>
<style>
* {
padding: 2px;
margin: 5px;
}
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Window-closed</legend>
<input id="urlSelect" type="url" placeholder="Type URL here..."><br>
<input type="button" value="Go To" onclick="openWindow()">
<input type="button" value="Close" onclick="closeWindow()">
<input type="button" value="Restore" onclick="restoreWindow()">
</fieldset>
</form>
<script>
var urlSelect = document.getElementById("urlSelect");
var winSource;
function openWindow() {
browseWindow = window.open(urlSelect.value, "browseWindow", "width=400, height=200");
winSource = urlSelect.value;
}
function closeWindow(){
if(browseWindow)
browseWindow.close();
}
function restoreWindow(){
if(browseWindow.closed)
browseWindow = window.open(winSource, "browseWindow", "width=400, height=200");
}
</script>
</body>
</html>코드 설명
- openWindow(): 입력 필드에 입력된 URL로 새 창을 열고, 해당 URL을
winSource변수에 저장합니다. - closeWindow(): 열려 있는 창이 존재하는 경우
browseWindow.close()메서드로 창을 닫습니다. - restoreWindow():
browseWindow.closed속성이true(창이 닫힌 상태)인지 검사한 후, 저장해 둔 URL로 새 창을 다시 엽니다.
실행 결과(Output)
URL 필드에 주소를 입력한 후 'Go To' 버튼을 클릭하면 지정한 크기(400×200)의 새 창이 열립니다.
'Close' 버튼을 클릭하면 열려 있던 창이 닫히며, 이 시점에서 closed 속성은 true를 반환합니다.
'Restore' 버튼을 클릭하면 closed 속성이 true임을 확인하고, 저장된 URL로 창이 다시 열립니다.
정리
window.closed 속성은 자바스크립트에서 팝업창이나 새 창의 생명주기를 관리할 때 필수적인 도구입니다. 닫힌 창에 대한 불필요한 접근을 사전에 차단함으로써 코드의 안정성을 높일 수 있습니다. 특히 위 예제처럼 window.open()과 함께 사용하면 창을 열고, 닫고, 상태를 확인하여 복원하는 전체 흐름을 손쉽게 구현할 수 있습니다.