[Javascript/JQuery]작성중인 페이지 이탈시 경고

궁금증

가끔 네이버 메일이나 기타 블로그등을 보면 작성중인 데이터가 있는 경우 페이지를 refresh 하거나 기타 다른 url로 이동하려고 하는 경우 다음과 같은 메세지를 본 적이 있을것이다.

이 메세지는 어떻게 구현하는 것일까?

해결법

javascript의 beforeunload 이벤트를 처리해주면 된다.

$(window).bind('beforeunload', function() {
  const isChanged = ...; //페이지 변경 여부
 
  if(isChanged) {
  	return "띄울 메세지";
  }
});

다음과 같이 이벤트를 binding해주면 된다.

그런데 문제가 발생하는 부분은 submit 또는 button-click 이벤트가 발생하여 현재 페이지에서 벗어나려고 할때도 이 코드가 동작한다는 것이다. 이럴 때엔 unbind로 특정한 작업이 이루어질 때 binding을 해제해주면 된다. 예시는 다음과 같다.

$('#btn-save').on('click', function() {
  
	$.ajax(...).done(function () {
      // 성공시 해제
      $(window).unbind('beforeunload');
    });
});