javascript로 브라우저 창이 닫히거나 페이지 이동시 이벤트 처리하는 방법이다.
보통 팝업 윈도우에서 특정 로직을 처리하고
정상적으로 닫기 버튼을 눌렀을때나
글을 작성하다 취소나 저장을 누르고 해당 페이지를 빠져나오면
개발자가 이벤트 처리를 통제하기 쉽다..
그런데 클라이언트 요구 중 브라우저의 오른쪽 위에 있는 "x"를 눌러서 닫을때
경고를 주거나 작성중인 글을 저장해주길 원한다.
이럴때 사용되는 이벤트가 beforeunload 이벤트 이다.
소스 적용방법은 다양하다.
1. jquery
$(window).bind("beforeunload", function (e){
return "창을 닫으실래요?";
});
2. 이벤트 추가
window.addEventListener("beforeunload", function (event) {
event.returnValue = "진짜 나감?";
});
3. 이벤트 선언
window.onbeforeunload = function() {
return "나가실래요?";
}
4. 태그에 이벤트 넣기
<script>
function abc(){
event.returnValue = "정말닫음?";
}
</script>
<body onbeforeunload="abc();">
이런식으로 return 또는 event.returnValue 의 문자열이 익스플로러인 경우 닫힘 경고창에 표시되게 된다.
크롬
익스플로러
크롬인 경우는 경고창에 해당 문구가 표시되지 않는다.
그럼 경고창 없이 특정 로직을 처리하고 싶을때는 어떨까.
return이나 event.returnValue를 삭제하고
특정 로직을 수행하는 함수를 실행시킨다.
이 경우 서버에서 처리할 무엇인가가 있다면
ajax를 이용하게 된다.
ajax를 이용하는 경우
$.ajax({
url : "처리페이지url",
cache : "false", //캐시사용금지
method : "POST",
data : $("#frm").serialize(),
dataType: "html",
async : false, //동기화설정(비동기화사용안함)
success:function(args){
//$("#result").html(args);
},
error:function(e){
//alert(e.responseText);
}
});
이런식으로 서버에 ajax로 호출하여 서버처리를 완료하고
완료되면 창이 닫히는 효과를 볼 수 있다.
'프론트 프로그램' 카테고리의 다른 글
| bxslider 웹 접근성 지적사항 조치 (4) | 2019.01.18 |
|---|---|
| jquery 달력 datepicker 웹접근성 (0) | 2018.08.21 |
| 웹 페이지 강제 이동시키기 (0) | 2017.09.28 |
| Tabs Upload 3 업로드, 다운로드 소스 (0) | 2017.07.07 |
| servervariables(request.servervariables("컬렉션")) 컬렉션값 출력하기 (0) | 2011.01.26 |