게시물이나 코멘트를 작성하려는 경우 전송을하지 않고 나가게 되면 ‘정말로 이 페이지를 벗어나시겠습니까?’ 라고 물어보는 자바스크립트다. 원리는 굉장히 간단하다.

$(window).on('beforeunload', function(){
  var isNoSaved = true; // 각 사이트마다 저장하지 않고 나가는 상황을 조건검
  if(isNoSaved)
    return '저장하지 않은게 있어..'; // 나갈꺼냐 말꺼냐는 브라우저가 붙여줌.
});

문제점

위 처럼만 간단하게 작업을 해두면, 브라우저상의 새로고침이나 창(탭)닫기에만 반응할 뿐, 내부 링크를 통해서 벗어나는 것은 막을 수가 없다. 최근에는 drawer(좌측에 숨겨지는 사이드바)에 나타나는 링크 등을 통해서 벗어나는 경우가 자주 발생할 수 있다. 따라서 꼼수를 하나 추가해준다.

$(document).on('click', 'a', function(e){
  e.preventDefault();
  location.href = $(this).attr('href');
});

링크를 자바스크립트 페이지 이동으로 동작하도록 치환하면, 위의 beforeunload에 말려들어간다.

해결하지 못한 문제점

  • 브라우저의 back, forward를 통해서 벗어나는 것은 아직 잡히지 않는다.
  • 페이스북처럼 아름다운 창을 띄우는 방법은 잘 모르지만 아직 관심이 없다.

원본글 : https://medium.com/p/287ad5bf586c