JS 윈도우창 닫기 버튼 클릭 이벤트 감지(beforeunload)

브라우저 우측 상단의 x 버튼을 눌렀을 때 이벤트를 감지하여 창을 닫기 전 윈도우창 닫기 이벤트를 취소할지를 묻는 팝업창을 띄우는 방법입니다.

 

Window: beforeunload (이동)

사용자가 페이지를 정말로 떠날 것인지 묻는 팝업창을 표시합니다. 팝업창을 표시하려면 이벤트의 preventDefault()를 호출해야합니다.

window.addEventListener('beforeunload', (event) => {
  // 표준에 따라 기본 동작 방지
  event.preventDefault();
  // Chrome에서는 returnValue 설정이 필요함
  event.returnValue = '';
});

 

jquery 버전입니다.

$(window).bind("beforeunload", function (e){
	return "창을 닫으실래요?";
});

// 출처: https://suyou.tistory.com/86 [수유산장]

 

경고창 없이 특정 로직을 처리하고 싶을 때. 서버에 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);  
	}
});

// 출처: https://suyou.tistory.com/86 [수유산장]