Javascript - 브라우저 닫기 혹은 새로고침 감지하기
- 프로그래밍/자바스크립트
- 2021. 5. 5.
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를 사용하는 위와 같은 방법도 있습니다. 권장하는 방법은 아니지만 이런 방법도 있다 정도는 알고 계시면 좋을 것 같아 추가로 설명드리는 부분입니다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - DocumentFragment를 사용해보자 [성능 최적화] (3) | 2021.05.08 |
|---|---|
| Javascript - XMLHttpRequest 사용하기 (12) | 2021.05.06 |
| Javascript - 디바이스 구분하기 [Mobile, PC] (19) | 2021.05.04 |
| Javascript - ES6의 let과 const 그리고 var의 차이 (18) | 2021.05.03 |
| Javascript - 변수와 상수 그리고 리터럴 (17) | 2021.04.30 |