Javascript Jquery 브라우저 종료시 로그아웃 처리하기 - beforeunload

브라우저의 X 표시 또는 탭 X를 통해 종료 시킬 때 자동 로그아웃 처리하는 방법입니다.

로그아웃 이외에도 특정 작업을 하실 수 있습니다.

beforeunload 이벤트를 통해서 처리가 가능합니다.

beforeunload 이벤트의 경우 window.addEventListener를 통해서 처리를 할 때 잘 되었습니다.

단순히 beforeunload만을 사용할 경우 페이지 내에서 새로고침, 링크 연결 등 다양한 액션에도 동작을 하게 되어 원하는 결과를 얻을 수 없습니다.

그래서 각각의 이벤트를 확인하여 진행이 되지 않도록 처리를 한 후 브라우저가 꺼졌을 경우에만 처리가 되도록 합니다.

ajax 사용시 async 를 false로 처리를 하여 비동기 통신이 아닌 동기 통신으로 변경을 하여야 처리가 됩니다.

var closing_window = false;
 	$(window).on('focus', function () {
		closing_window = false;
	 	//if the user interacts with the window, then the window is not being
	 	//closed
 });

 $(window).on('blur', function () {

	 closing_window = true;
	 if (!document.hidden) { //when the window is being minimized
		 closing_window = false;
	 }
	 $(window).on('resize', function (e) { //when the window is being maximized
		 closing_window = false;
	 });
	 $(window).off('resize'); //avoid multiple listening
 });

 $('html').on('mouseleave', function () {
	 closing_window = true;
	 //if the user is leaving html, we have more reasons to believe that he's
	 //leaving or thinking about closing the window
 });

 $('html').on('mouseenter', function () {
	 closing_window = false;
	 //if the user's mouse its on the page, it means you don't need to logout
	 //them, didn't it?
 });

 $(document).on('keydown', function (e) {

	 if (e.keyCode == 91 || e.keyCode == 18) {
		 closing_window = false; //shortcuts for ALT+TAB and Window key
	 }

	 if (e.keyCode == 116 || (e.ctrlKey && e.keyCode == 82)) {
		 closing_window = false; //shortcuts for F5 and CTRL+F5 and CTRL+R
	 }
 });

 // Prevent logout when clicking in a hiperlink
 $(document).on("click", "a", function () {
	 closing_window = false;
 });

 // Prevent logout when clicking in a button (if these buttons rediret to some page)
 $(document).on("click", "button", function () {
	 closing_window = false;

 });
 // Prevent logout when submiting
 $(document).on("submit", "form", function () {
	 closing_window = false;
 });
 // Prevent logout when submiting
 $(document).on("click", "input[type=submit]", function () {
	 closing_window = false;
 });

 var toDoWhenClosing = function() {
	 $.ajax({
		 type: "POST",
		 url: "/logout.php",
		 async: false
	 });
	 return;
 };

window.addEventListener("beforeunload", function (e) {
	if (closing_window) {
		toDoWhenClosing();
	}
});

 

Javascript Jquery 브라우저 종료시 로그아웃 처리하기 - beforeunload

 

2019/12/24 - [유용한 활용팁] - JavaScript 원하는 영역에 대해서만 출력 화면 설정하기 - window.print()

JavaScript 원하는 영역에 대해서만 출력 화면 설정하기 - window.print()

2019/12/21 - [유용한 활용팁] - JavaScript ajax jquery $.post를 이용하여 form 데이터 구성 없이 post로 데이터 전송 처리

JavaScript ajax jquery $.post를 이용하여 form 데이터 구성 없이 post로 데이터 전송 처리

2019/11/23 - [유용한 활용팁] - IE11에서 Jquery로 background-image 바뀌게(토글, toggle) 에러 처리 방법 - addClass, removeClass, hasClass, toggleClass

IE11에서 Jquery로 background-image 바뀌게(토글, toggle) 에러 처리 방법 - addClass, removeClass, hasClass, toggleClass

2019/11/15 - [유용한 활용팁] - JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)

JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)

2019/11/07 - [유용한 활용팁] - JavaScript(자바스크립트), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법 - replace 활용

JavaScript(자바스크립트), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법 - replace 활용

2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산

JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산

2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate

JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate