onbeforeunload 사용팁, 카카오톡 인앱 브라우저에서 문제 임시해결 방법

onbeforeunload 사용법과 유용한 팁하나 그리고 카카오톡 인앱 브라우저에서 사용할 경우 카카오톡이 죽는 문제(버그인듯)의 임시 해결방법을 간단하게 공유합니다.

beforeunload event

브라우저에서 힘들게 작성하던 페이지가 너무 쉽게 닫혀서(예를 들면 back key) 작성하던게 다날라가 버리는 것을 방지하기 위해서 정말 페이지를 벗어날 것인지 사용자에게 한번 더 물어보도록 동작하게 beforeunload 이벤트를 처리해 두곤 합니다.

window.onbeforeunload = function() {
    return '작성하던 내용이 모두 사라집니다'; //표시할 메시지를 반환하면 됨
}

위와 같이 간단히 처리하면 됩니다. 자세한 내용은 아래를 참고하시면 됩니다.

The beforeunload event is fired when the window, the document and its resources are about to be unloaded. When a string is assigned to the returnValue Event property, a dialog box appears, asking the users for confirmation to leave the page (see example below). developer.mozilla.org/.../beforeunload

a 링크 예외 처리

근데 beforeunload 이벤트 걸어놓으면 사용자가 의도적으로 페이지를 벗어나려 할 때도 매번 의사를 물어봅니다. 귀찮게. 그걸 해결하는 방법이 여러가지 있습니다. 일단 기본적으로 이벤트 함수에 null을 넣어두면 되는데, jquery .hover를 이용해서 <a>태그만 예외처리 하는 방법이 있습니다.

jQuery(
    function($)
    {
        //store onbeforeunload for later use
        $(window).data('beforeunload',window.onbeforeunload);  

        //remove||re-assign onbeforeunload on hover 
        $('a')
          .hover( 
         function(){window.onbeforeunload=null;},
         function(){window.onbeforeunload=$(window).data('beforeunload');}
        );
    }
);

링크와 submit 동작에 적절히 예외 처리하는 방법

위 내용을 바탕으로 상황에 맞게 적절히 응용해서 사용하면 됩니다!

카카오톡 인앱 브라우저 문제

제가 절대비밀 프로젝트하다가 발견한건데 beforeunload 이벤트를 걸어두니까 카카오톡 인앱 브라우저가 종료될때 카카오톡이 비정상 종료 되더라구요. 카카오톡 인앱 브라우저 버그인것 같습니다. 지원안하는 기능이 있다지만, 앱이 죽는 것은 흠...좀...

딱히 방법을 못 찾았어요. 제가 디버깅 할 수 있는 부분이 아니라서...찾다 찾다 결국 못찾고 UA 확인해서 회피하는 수밖에 없었습니다. UserAgent 체크해서 "KAKAKO" 포함하고 있으면 beforeunload 처리를 따로 안하도록 해뒀습니다. (언젠가 수정되겠죠...ㅎ)

인앱 브라우저 문제가 의외로 많은것 같던데...일단 아래 사이트에서 좀 찾아보고 없으면 얼릉 글을 쓰는것이 좋은 것 같습니다. 그나마 응답은 제때 해주는 것 같아요.

https://devtalk.kakao.com/category/javascript

님의 삽질에 조금이나마 도움이 되길 바라며...ㅎ