사용자가 회원가입이나 신청 프로세스 도중 페이지를 벗어나거나 새로고침할 경우 기존에 입력되는 모든 값이 초기화된다!
이를 의도한 사용자도 있겠지만, 실수로 눌려졌다면 좋은 사용자 경험을 줄 수 없을 것이다.
beforeunload
사용자가 페이지를 떠나거나 닫을 때 발생하는 이벤트이다. 사용자가 페이지를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜 줄 때 사용한다.
새로고침, 뒤로 가기, 브라우저 닫기 등의 경우에 아래와 같이 실행된다!
window.addEventListener("beforeunload", (event) => {
event.preventDefault();
});
안내 메시지를 변경할 수 있나 했는데
일반적인 브라우저에서는 beforeunload 이벤트를 취소할 때 보이는 메시지를 커스터마이징 할 수 없다고 한다!
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
Window: beforeunload event - Web APIs | MDN
The beforeunload event is fired when the current window, contained document, and associated resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.
developer.mozilla.org
'IT > JavaScript' 카테고리의 다른 글
| 소셜 로그인 구현 (카카오, 네이버, 애플) + 로그인 후 이전 페이지로 보내는 방법 (0) | 2023.11.04 |
|---|---|
| 엑셀 다운로드 (0) | 2023.11.01 |
| 모바일 웹에서 100vh 적용하기 (0) | 2023.11.01 |
| 모바일 웹에서 app으로 이동(딥링크) (0) | 2023.10.26 |
| axios interceptors로 refreshToken을 이용해서 accessToken 재발급 (0) | 2023.10.17 |
사용자가 회원가입이나 신청 프로세스 도중 페이지를 벗어나거나 새로고침할 경우 기존에 입력되는 모든 값이 초기화된다!
이를 의도한 사용자도 있겠지만, 실수로 눌려졌다면 좋은 사용자 경험을 줄 수 없을 것이다.
beforeunload
사용자가 페이지를 떠나거나 닫을 때 발생하는 이벤트이다. 사용자가 페이지를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜 줄 때 사용한다.
새로고침, 뒤로 가기, 브라우저 닫기 등의 경우에 아래와 같이 실행된다!
window.addEventListener("beforeunload", (event) => {
event.preventDefault();
});
안내 메시지를 변경할 수 있나 했는데
일반적인 브라우저에서는 beforeunload 이벤트를 취소할 때 보이는 메시지를 커스터마이징 할 수 없다고 한다!
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
Window: beforeunload event - Web APIs | MDN
The beforeunload event is fired when the current window, contained document, and associated resources are about to be unloaded. The document is still visible and the event is still cancelable at this point.
developer.mozilla.org
'IT > JavaScript' 카테고리의 다른 글
| 소셜 로그인 구현 (카카오, 네이버, 애플) + 로그인 후 이전 페이지로 보내는 방법 (0) | 2023.11.04 |
|---|---|
| 엑셀 다운로드 (0) | 2023.11.01 |
| 모바일 웹에서 100vh 적용하기 (0) | 2023.11.01 |
| 모바일 웹에서 app으로 이동(딥링크) (0) | 2023.10.26 |
| axios interceptors로 refreshToken을 이용해서 accessToken 재발급 (0) | 2023.10.17 |
