웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
자바스크립트를 통해 브라우저 창 또는 탭이 열린 경우 이를 닫는 방법에 대하여 알아봅니다. 어떻게 하면 자바스크립트에서 창을 닫는 것이 가능할까요?
# 자바스크립트 브라우저 닫는 방법, 새 창 또는 새 탭
현재 브라우저 창이 열린 경우 다음의 방법을 통해 열린 창을 닫을 수 있습니다. 아래의 close는 내장함수입니다.window.close()
위 함수를 동작하면 열려있는 창에서 코드가 동작하여 자기 자신, 브라우저를 닫는 방법입니다. 그렇다면 간단하게 예제를 만들어보겠습니다.
여기서는 close 버튼을 만들고 이 버튼을 클릭할 경우 현재 창, 윈도우가 닫치는 방법입니다. 아래 코드를 봐주세요.
<span>현재 창을 닫으려면 닫기 버튼을 누르세요!</span>
<span onclick="window.close();">닫기</span>
<span onclick="window.close();">닫기</span>
닫기 버튼을 누를 경우 인라인 스크립트를 실행하여 현재 창을 닫게됩니다. 즉 아래의 스크립트가 동작하죠
window.close();
매우 간단합니다. 여기서 만약 닫고자 하는 창이 현재 창이 아니라면? 이 경우 새로운 창을 열게 한 요소에서 창을 닫을 경우 아래의 예제를 참고하시기 바랍니다.
! 부모창에서 열린 새로운 창을 닫는 방법 알아보기
아래의 방법을 사용합니다. 새로운 창을 열었던 함수를 변수에 선언하고 이를 사용하여 close() 함수를 사용하는 방법입니다. 아래 코드를 봐주세요.<script>
var new_popup = window.open('test.html', 'width=300px; height=300px;');
// 새로운 창을 열때 사용한 코드
new_popup.close(); // new_popup 변수명에 저장된 창을 닫음
</script>
var new_popup = window.open('test.html', 'width=300px; height=300px;');
// 새로운 창을 열때 사용한 코드
new_popup.close(); // new_popup 변수명에 저장된 창을 닫음
</script>
new_popup 변수는 새롭게 열린 window 객체의 인스턴스를 저장하고 있습니다. 이 인스턴스를 끝낼 수 있도록 close() 함수를 바로 적용할 수 있습니다.
여기까지 window.close() 함수를 알아보았습니다. 매우 간단하고 유용한 내장함수입니다.
아래의 글도 찾고 계시지 않나요?
