브라우저를 새로고침 하거나, 그냥 브라우저를 닫는 경우 데이터의 손실을 막기 위해 메세지 창이 뜨는걸 보신 적이 있을 겁니다.
대표적으로 Facebook에서 글을 쓰다가 이탈할 경우에 뜨는 창이죠!
페이스북에서 글을 쓰다가 새로고침을 하면 "아직 글을 올리지 않았습니다. 올리지 않은 채로 다른 페이지로 가시겠어요?"라는 메세지와 함께 사용자를 멈칫 하게 만들어 줍니다.
이런 기능은 의외로 쉽게 구현이 가능한데요, jQuery를 사용하는 경우의 코드는 다음과 같습니다.
<script type="text/javascript" >
function beforeUnloadHandler(){
return 'message' ;
}
$(window).bind('beforeunload', beforeUnloadHandler);
// unbind
//$(window).unbind('beforeunload', beforeUnloadHandler) ;
</script>
밑의 unbind 된 부분은 주석처리 되어 있죠? 해당 코드를 등록 해제할 경우에 사용합니다.
특정 작업을 시작할 때 bind 해주고, 작업이 끝난 경우에는 unbind 해주는거죠~
물론 jQuery를 사용하지 않아도 메세지를 띄울 수 있습니다.(window.onbeforeunload = function(e) { })
'message'라고 적힌 곳에 원하는 설명 메세지를 적어주면 되겠죠? 하지만 아쉽게도 Firefox에서는 메세지가 보이지 않습니다.
각 브라우저에서 보이는 화면은 다음과 같습니다.
