[Javascript] 페이지에서 새로고침, 뒤로가기 시 안내 메시지 나타내기

 

<script type="text/javascript">
	window.addEventListener('beforeunload', (event) => {
		// 명세에 따라 preventDefault는 호출해야하며, 기본 동작을 방지합니다.
		event.preventDefault();

		// 대표적으로 Chrome에서는 returnValue 설정이 필요합니다.
		event.returnValue = '';
	});
</script>

페이지가 변경되는 경우 위와 같은 스크립트를 이용하여 경고 메시지를 나타낼 수 있다.

 

하지만, 폼에 내용을 작성하고 저장하는 페이지를 구현했을때는 저장을 누르는 순간에도 해당 안내창이 나타난다.

 

방법은 아래와 같은 방법으로 해결이 가능하다.

 

 

<script type="text/javascript">
	var checkUnload = true;
	$(window).on("beforeunload", function(){
		if(checkUnload) return '이 페이지를 벗어나면 작성된 내용은 저장되지 않습니다';
	});

	$("#form").submit(function(){
		checkUnload = false;
	});
</script>

 

위와 같은 방법으로 적용을 하면 form의 submit 이벤트가 아닌 경우에는 안내메시지를 나타낸다.

 

 

 

출처:

https://stove99.tistory.com/128

https://7942yongdae.tistory.com/66