Javascript - 브라우저 닫기 혹은 새로고침 감지하기

 HTML의 이벤트 중 beforeunload를 이용하면 브라우저 닫기나 새로고침을 감지할 수 있습니다. 일반적으로 화면에서 저장하지 않은 데이터가 있거나, 사용자의 실수로 인해 페이지를 나가려고 할 때 알림을 주는 용도로 사용됩니다. 예시로는 블로그에 글을 작성하다가 도중에 페이지를 나가려는 경우 사용자에게 알림 창을 보여 줄 수 있습니다.

 

 beforeunload 이벤트를 사용하면 사용자가 페이지를 떠날 때, 페이지를 떠날 것인지 여부를 묻는 대화 상자를 표시할 수 있습니다. 사용자가 확인을 누르면 페이지는 닫히며, 취소를 누르면 페이지를 떠나지 않고 현재 페이지에 머무릅니다.

문법

 beforeunload 이벤트를 사용해서 사용자가 페이지를 떠나는 것을 확인하는 방법은 다음과 같습니다.

window.addEventListener('beforeunload', (event) => {
  // 명세에 따라 preventDefault는 호출해야하며, 기본 동작을 방지합니다.
  event.preventDefault();
});

 beforeunload 이벤트는 페이지가 unload 되기 전 상태, 즉 초기화가 되기 전에 실행되는 이벤트입니다. addEventListener 함수를 통해 beforeunload 이벤트에 콜백 함수를 등록할 수 있습니다. 콜백 함수를 등록할 때에 확인 대화 상자를 표시하려면 명세에 따라서 preventDefault()를 호출해야 합니다.

 

 모든 브라우저가 위의 지시사항을 따르지 않기 때문에 상황에 따라서는 두 가지의 방법을 사용해야 될 수도 있습니다.

returnValue 설정

window.addEventListener('beforeunload', (event) => {
  // 명세에 따라 preventDefault는 호출해야하며, 기본 동작을 방지합니다.
  event.preventDefault();
  
  // 대표적으로 Chrome에서는 returnValue 설정이 필요합니다.
  event.returnValue = '';
});

문자열 반환

window.addEventListener('beforeunload', (event) => {
  // 명세에 따라 preventDefault는 호출해야하며, 기본 동작을 방지합니다.
  event.preventDefault();
  
  // 문자열 반환
  return '';
});

 여기서 확인해두어야 할 점은 이전에 일부 브라우저는 사용자에게 표시하는 확인 대화 상자의 메시지를 정의할 수 있었습니다. 하지만 현재 대부분의 브라우저는 메시지 정의할 수 없다는 것입니다.

 

 또한 일부 브라우저는 사용자가 페이지 내에서 상호작용을 한 기록이 없는 경우 확인 대화 상자를 표시하지 않을 수 있습니다. 이는 확인 대화 상자를 불필요하게 사용하거나 악의적으로 이용하는 경우를 방지하기 위함입니다.

 

 

예제 코드

<!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>
    <h4>
        브라우저 닫기 혹은 새로고침 감지하기
    </h4>
    <form>
        <textarea placeholder="글자를 입력해서 페이지를 사용해보세요."></textarea>
    </form>

    <script type="text/javascript">
        window.addEventListener('beforeunload', (event) => {
            // 명세에 따라 preventDefault는 호출해야하며, 기본 동작을 방지합니다.
            event.preventDefault();

            // 대표적으로 Chrome에서는 returnValue 설정이 필요합니다.
            event.returnValue = '';
        });
    </script>
</body>

</html>

 HTML 페이지에 addEventListener 함수와 beforeunload 이벤트를 이용해 브라우저를 닫거나, 페이지를 이동 혹은 나가려고 할 때 확인 대화 상자를 표시하도록 예제 코드를 작성하였습니다.

<body onbeforeunload="return '';">

 자바스크립트를 사용하지 않고 body에 직접 onbeforeunload를 사용하는 위와 같은 방법도 있습니다. 권장하는 방법은 아니지만 이런 방법도 있다 정도는 알고 계시면 좋을 것 같아 추가로 설명드리는 부분입니다.

반응형

댓글(18)

Designed by JB FACTORY