리액트 브라우저 종료 이벤트 - liaegteu beulaujeo jonglyo ibenteu

Question

반응형

window에서 지원하는 beforeunload 이벤트인데요. document가 언로드되기 전에 호출되는 이벤트입니다.

beforeunload 이벤트는 구체적으로 다음과 같은 상황에서 발생합니다.

사이트 창을 닫으려고 할 때
다른 주소로 이동하려고 할 때
같은 주소여도 새로고침하려고 할 때(이 때는 Reload site? 문구가 뜹니다)

이제 코드를 작성해 봅시다.

여기서 Input을 감지하기 위해 v-model과 watch로 값의 변화를 감지하고 canLeaveSite라는 boolean 값으로 결정하도록 합니다.

그리고 vue의 라이프 사이클 주기 중에서 mounted될 때와 beforeUnmount될 때 이벤트를 등록하고 해지시키도록 합니다.

  mounted() {
    window.addEventListener('beforeunload', this.unLoadEvent);
  },
  beforeUnmount() {
    window.removeEventListener('beforeunload', this.unLoadEvent);
  },

이벤트를 등록할 때 아래 unLoadEvent를 두 번째 인자로 넣어 실행되게 합니다. input이 변경되지 않은 경우에는 early return하여 경고창이 뜨지 않습니다.

표준에 따라 기본 동작을 방지하기 위해 preventDefault를, Chrome에서 동작하기 위해 returnValue 설정을 합니다.

methods: {
    unLoadEvent: function (event) {
      if (this.canLeaveSite) return;

      event.preventDefault();
      event.returnValue = '';
    },
}

https://egg-programmer.tistory.com/290

반응형

게시글 관리

구독하기Crocus

저작자표시 비영리 동일조건

'Basic > VueJS' 카테고리의 다른 글

filepond를 이용한 파일 업로드 (0)2022.04.03Vue textarea의 Dynamic v-model (0)2022.01.22Vue를 이용한 Draggable list 구현 (0)2021.10.20Vue를 이용한 element transition animation 예제 (0)2021.06.29Vue Life Cycle을 이해하기 좋은 사이트 모음 (0)2019.07.13

form, input 태그 사용 없이 ajax 통신 시 jquery의 $.post를 이용하여 post 방식으로 데이터 전송 방법입니다. 아래는 일반적으로 사용하는 방식입니다. $.ajax({ type: 'POST', url: url, data: data, success:..

han288.tistory.com

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

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

IE(Internet Explore) 11에서 background-image 버튼 바꾸는(Change) 방법입니다. jquery로 .css로 접근시 크롬과 엣지에서 이상없이 버튼 이미지가 바뀌는데, IE11에서는 바뀌지 않는 에러에 대한 처리 방법입니..

han288.tistory.com

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

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

JavaScript(자바스크립트)에서 구분자를 이용하여 배열 만들기 // 구분자로 구성된 문자열 var str = "aa/bb/cc/dd/ee"; // 구분자(/)를 통해 나뉜 결과는 배열로 저장된다. var arr = str.split("/"); // 결과값..

han288.tistory.com

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

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

자바스크립트(JavaScript), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법입니다. 1. 클릭 이벤트를 캡쳐합니다. 2. 클릭한 객체로 children를 이용하여 이미지 노드를 찾아갑니다. 3. 현재 이미지 속..

han288.tistory.com

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

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

JavaScript로 input 입력값에 대한 생년월일 유효성 검사하기 1. 입력값 : YYYYMMDD 2. return 값: true / false 3. 2월 29일(윤년) 체크 function isBirthday(dateStr) { var year = Number(dateStr.substr(0,4))..

han288.tistory.com

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

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

JavaScript로 Input type의 날짜를 체크하는 함수들입니다. isDate 함수 날짜 형식이 맞는지 체크하는 함수입니다. 입력값 형식은 yyyymmdd, yyyy-mm-dd, yyyy/mm/dd 3가지 사용을 할 수 있습니다. function isDat..

개발 언어/자바 스크립트 java script

javascript 닫기, 새로고침 이벤트 처리 (정말 나가시겠습니까?)

코더마더 2020. 1. 13. 17:23

사용자가 게시물을 작성하다가 실수로 브라우저를 닫거나, 새로고침을 하면 여태껏 작성하던 내용을 모두 날릴 수 있다.

우리가 게시판이나 커뮤니티 웹 사이트를 만든다면, 이런 불상사를 막아야 된다.

이럴때 보통 javascript에서 제공하는 onbeforeunload 함수를 사용한다.

이름에서 추측할 수 있드시 unload 되기 전의 이벤트를 받는 함수다.

unload는 우리가 자주 사용하는 로드(load)의 반대말로 로드된 페이지가 꺼지는 것,

즉, 새로고침이나 브라우져를 닫았을 때, 실행되는 이벤트다.

사용법)

<html>
	<script>
		function test() {
		    window.onbeforeunload = function (e) {
                    return 0;
		    };
		}
	</script>
    
<body onload="test();">
</body>
</html>

스크립트 태그에 test() 함수를 선언하고, 안에 window.onbegoreunload를 선언한다.

그리고 body 가 load 될때, test() 함수가 실행되도록 onload 에 test();를 넣어준다.

그리고 실행시키면, window.onbeforeunload가 실행된 상태기 때문에,

unload 이벤트가 발생하는지 계속 감시하고 있다가, 사용자가, 새로고침이나, 닫기를 눌렀을 때,

맨위의 이미지와 같이 나가기를 할것인지, 새로고침을 할것인지의 팝업이 나타난다. (인터넷 익스플로러도 마찬가지다.)

https://www.w3schools.com/jsref/event_onbeforeunload.asp

위의 링크로 가서 직접 실행해보길 바란다.

+ 추가적으로

닫기, 새로고침 이벤트를 받아 따로 처리할 수는 없나?

예를 들어, 사용자가 새로고침 할때는, 아무 메세지도 띄우지 않고, 닫기를 눌렀을 때만, 메세지를 띄울수는 없나?

- 찾아보니 위의 처리는 어려울 것 같다.

자바스크립트에서 onbeforeunload 라는 함수만을 제공하고 있기 때문에,