사용자가 게시물을 작성하다가 실수로 브라우저를 닫거나, 새로고침을 하면 여태껏 작성하던 내용을 모두 날릴 수 있다.
우리가 게시판이나 커뮤니티 웹 사이트를 만든다면, 이런 불상사를 막아야 된다.
이럴때 보통 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 라는 함수만을 제공하고 있기 때문에,
이벤트 리스너를 호출 후 새로고침을 했을때, 호출되었던 이벤트 리스너를 취소하는 방법이 따로 없다.
참조 : https://developer.mozilla.org/ko/docs/Web/Events/beforeunload
beforeunload
beforeunload 이벤트는 윈도우, 문서 및 리소스가 언로드 될 때 발생합니다....
developer.mozilla.org
'개발 언어 > 자바 스크립트 java script' 카테고리의 다른 글
| [css] 웹 브라우저 프린터 배경색 나오도록 설정 (크롬/인터넷 익스플로어 등..) (0) | 2020.06.12 |
|---|---|
| [자바 스크립트] 셀렉트 박스 (select) 오늘 날짜 자동 선택 (0) | 2020.06.10 |
| 셀렉트박스(select) 변경 이벤트 처리하기 [javascript] (0) | 2019.03.26 |
| [웹] 데이트 피커 추가 [nice-date-picker js] [달력추가] (0) | 2019.03.21 |
| 자바 스크립트 이미지 미리보기 기능(java script) (0) | 2019.03.20 |
댓글