Javascript - 브라우저 창 혹은 탭 닫기 [window.close()]

프로그래밍/자바스크립트
2021. 5. 13.

자바스크립트를 통해 브라우저 창이나 탭을 닫는 방법은 간단합니다. window.close()는 함수를 호출하면 됩니다. 단 window.close() 함수를 사용할 때는 한 가지를 주의해야 합니다. 바로 스크립트나 Link를 기준으로 열린 창만 닫힌다는 부분입니다. 자 그럼 브라우저 창을 닫는 window.close()는 어떻게 써야 잘 사용할 수 있는지 알아보도록 하죠.

문법

window.close();

웹 페이지를 닫는 방법은 window.close() 함수를 호출하면 됩니다. 하지만 window.close() 함수가 문제없이 동작하려면 window.open() 함수를 통해서 열린 웹 페이지여야 한다는 조건이 있습니다. Link를 통해 열린 웹 페이지도 window.open() 함수를 통해 열린 웹 페이지와 동일한 성격을 가지고 있습니다. 즉 window.open() 함수를 통해 열린 웹 페이지나 Link를 통해 열린 웹 페이지만 window.close() 함수가 동작한다는 이야기입니다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>새창 열기</title>
</head>

<body>
    <div>
        <p>처음 페이지</p>
    </div>
    <div>
        <button onclick="newTabClick()">새창 열기</button>
        <button onclick="closeTabClick()">새창 닫기</button>
    </div>
    <script>
        function newTabClick() {
            window.open('new-tab.html', '_blank');
        }

        function closeTabClick() {
            window.close();
        }
    </script>
</body>

</html>

처음 페이지.html

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>새창 열기/닫기</title>
</head>

<body>
    <div>
        <p>추가 페이지</p>
    </div>
    <div>
        <button onclick="newTabClick()">새창 열기</button>
        <button onclick="closeTabClick()">새창 닫기</button>
    </div>
    <script>
        function newTabClick() {
            window.open('new-tab.html', '_blank');
        }

        function closeTabClick() {
            window.close();
        }
    </script>
</body>

</html>

새창 열기/닫기.html

조금은 정확한 설명을 위해서 새창을 열고 닫을 수 있는 예제 코드를 작성해보았습니다. window.open()과 window.close()를 사용하고 있으며, 처음 페이지와 추가 페이지는 텍스트만 다를 뿐 나머지 내용은 동일합니다. 위의 코드를 실제로 테스트하면 아래와 같은 화면을 보실 수 있습니다.

window.close()가 동작 안 한다. [Scripts may not close windows that were not opened by script]

window.close()를 사용했는데 브라우저 창은 안 닫히고 "Scripts may not close windows that were not opened by script" 브라우저 콘솔에 이 문구가 출력되고 계신다면 지금 보고 계신 웹 페이지는 script로 열리지 않은 페이지입니다. 즉 Link를 통해서 열린 웹 페이지이거나 window.open() 함수를 이용해 열린 웹 페이지는 이런 출력 메시지를 볼 수 없습니다. 또한 스크립트 사용해서 열리지 않은 페이지는 window.close() 함수를 이용해 닫을 수 없습니다.

window.close()를 통해 브라우저 창이 닫히지 않는 상황을 재현해보았습니다. 처음 페이지는 브라우저에 직접 URL을 입력하여 연결된 웹 페이지입니다. script를 통해 열린 추가 페이지는 문제없이 닫히는 반면, 처음 페이지는 콘솔에 메시지를 출력하며 화면이 닫히지 않는 현상을 확인할 수 있습니다.

Safari에서는 Mozila에서 예기하는 내용과 달리 "Can't close the window since it was not opened by JavaScript" 메시지를 띄웁니다.

window.close()가 동작을 안 하는 경우 약간의 편법을 사용해서 닫는 방법이 있습니다. 하지만 이 코드는 어디까지나 편법일 뿐 window.close()가 동작하지 않았다면 이 방법도 동작하지 않을 확률이 높습니다.

window.open('','_self').close();

정리하기

여기서 분명히 알아두어야 할 점은 window.close()라는 브라우저를 닫는 함수는 브라우저에서 문제없이 돌아가는 기능이었습니다. 하지만 이제는 보안 문제로 인해 링크를 통해 열리거나 스크립트를 사용해 열리지 않은 페이지는 닫을 수 없게 되었다는 것입니다. 보안 문제가 없는 조건에서는 window.close() 함수는 여전히 잘 동작합니다.

저작자표시 비영리 변경금지

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

Javascript - 실무에서 활용하는 console.log() 사용 방법 (3)	2021.05.20
Javascript - 기본 대화상자 사용법 [alert(), confirm(), prompt()] (0)	2021.05.18
Javascript - typeof 연산자 사용법을 알아보자 (6)	2021.05.09
Javascript - DocumentFragment를 사용해보자 [성능 최적화] (3)	2021.05.08
Javascript - XMLHttpRequest 사용하기 (12)	2021.05.06

개발자 일지