[javascript] window.onbeforeunload 페이지를 벗어날 때 이벤트 처리

개요

개발을 진행하는데 스토리보드 요구사항 중 하나가 사용자가 해당 페이지를 벗어나거나 새로고침을 할 경우 해당 페이지 내에서 변경된 값들을 다시 기존의 값으로 초기화하는 것이었습니다.

이를 구현하기 위해 저는 beforeunload event에 대해 알아봤고 이를 적용하여 해당 기능을 간단하게 구현할 수 있었습니다.

 

beforeunload 이벤트

beforeunload 이벤트는 사용자가 페이지를 떠날 때 발생합니다.

좀 더 구체적으로 설명하자면 아래와 같은 상황이 발생할 때 이벤트가 호출됩니다.

• 새로고침
• 뒤로 가기
• 브라우저 닫기
• form submit
• 등등

특정 상황에서는 beforeunload 이벤트를 발생시키고 싶지 않다면 아래와 같이 코드를 작성하면 됩니다.

아래 예시는 form submit을 할 때, beforeunload 이벤트를 발생시키지 않는 코드입니다.

$(document).on("submit", "form", function(event){
        window.onbeforeunload = null;
});

 

구현 방법

구현 방법을 설명하기 전 대략적인 페이지 설명을 하자면 민감정보를 마스킹한 상태로 실시간 목록을 매초 갱신하며 보여줘야 하고 마스킹 해제 버튼을 누르면 window.onbeforeunload 이벤트가 호출되기 전까지 마스킹 해제된 민감정보를 보여주는 형태입니다. 

따라서, 저는 민감정보 마스킹 해제를 할 때마다 해당 키를 세션에 저장하고 주기적으로 목록을 뿌려줄 때 세션에 키가 있는지 여부를 확인하고 키가 존재한다면 마스킹 해제된 상태로 민감정보를 뿌려주는 식으로 구현했습니다.

즉, 이런 상황에서 beforeunload 이벤트가 호출되면 목록에 표시된 모든 민감정보가 다시 마스킹 처리가 되어야 하므로 저는 beforeunload 이벤트가 호출되면 세션을 초기화하는 api를 호출하는 방식으로 요구사항을 구현했습니다.

 

window.onbeforeunload = function (event) {
	// 표준에 따라 기본 동작 방지
    event.preventDefault();
    
    // ajax 호출
}

 

위 방식 말고도 아래와 같이 이벤트 리스너를 추가하는 방식으로 구현이 가능한데 제 사수 말씀으로는 그렇게 구현할 경우 특정 브라우저에서 이벤트가 무시되는 현상이 발생한다고 하셔서 전자같이 구현했습니다.

object.addEventListener("beforeunload", myScript);

 

* 검색한 결과, 이벤트 리스너를 추가하는 방식은 ie8 혹은 ie8 이전 버전에서는 완벽하게 작동이 되지 않는다고 합니다.

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.

 

사실, 해당 서비스는 ie9 이상에서만 작동하면 돼서 어떤 방식으로 구현했어도 상관이 없긴 한데... 사수님의 말씀을 따르기로 했습니다.

 

 

[출처]

www.w3schools.com/jsref/event_onbeforeunload.asp

onbeforeunload Event

stackoverflow.com/questions/26838894/how-to-disable-window-onbeforeunload-when-submit-form/26839734

How to disable "window.onbeforeunload" when submit form?