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

 자바스크립트를 통해 브라우저 창이나 탭을 닫는 방법은 간단합니다. 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.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()가 동작 안함

 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() 함수는 여전히 잘 동작합니다.

반응형

댓글(4)

  • 2021.05.13 13:29 신고

    window.close()는 구글 크롬계열의 보안 정책에 의해서 팝업과 같은 상황이 아니라면 메인에서 닫기가 좀 까다롭습니다.
    그래서 보통은 우회해서 창을 닫는 방식을 많이 사용하죠 ㅎㅎ

    • 2021.05.14 10:01 신고

      아직까지는 이 방법으로도 크게 문제는 없었는데
      우회해서 창을 닫는 방법이 있군요 +_+

      궁금하네요 ㅎㅎ 알려주세요!

  • 2021.05.13 18:58 신고

    오늘도 깔끔히 정리된 포스팅 잘 보았어용 ㅎㅎ
    저는 PLC를 주로 다루는데 오늘 시험보고 왔더니 결과 생각하면 아찔해져서 가슴이 웅장해지는군요..
    프로그램 보니까 급 생각나는 오늘의 시험..

Designed by JB FACTORY