[WEB] beforeunload 이벤트

 특정 사이트 사용을 위해 유저가 로그인하는 상황을 생각해보자. 엄청난 양의 개인 정보를 작성한 이후 회원가입 버튼을 누르려는 찰나, 실수로 새로고침을 누르거나, 북마크에 있는 다른 사이트 링크를 클릭하여 기입했던 정보를 모두 잃어 처음부터 작성해야 하는 불상사가 일어나면 어떨까? 유저는 매우 부정적인 경험을 하게 되며, 해당 사이트의 대체제가 있다면 다른 사이트를 사용할 지도 모른다. 이를 방지하기 위해서는 유저의 행동이 의도된 것인지 확인할 필요가 있다.

 위와 같이 유저가 현재 페이지를 벗어나는 상황을 재확인 해야 하는 경우, beforeunload 이벤트를 이용한다.

Window: beforeunload 이벤트 - Web API | MDN

 

beforeunload

beforeunload 이벤트는 특정 사이트를 벗어나려고 하는 상황( 새로고침, 다른 사이트로 이동, 앞으로/뒤로가기 등 ) 에 발동될 수 있는 이벤트로, 현재 페이지를 정말 떠날 것인지 확인하기 위한 창을 표시한다.

확인 메시지를 출력한다. 

 자바스크립트의 prompt, confirm 등의 메서드를 이용하면 위와 같은 기본 창을 통해 사용자의 입력을 받아들일 수 있다. 따라서 위 스크린샷의 메시지 역시 해당 메서드들을 이용하여 구현한 것이라고 착각할 수 있다. 그러나 HTML 명세에 따르면 이벤트 처리 중 alert, prompt, confirm 메서드의 사용은 오히려 무시된다.

 위의 창은 프로그래머의 재량으로 변경할 수 없다. 과거에는 event.returnValue 프로퍼티를 통해 메시지를 변경할 수 있었다고 하나, 현재 대부분의 브라우저가 해당 기능을 미지원하므로 해당 동작을 이용해서는 안된다. 그렇다면 이를 어떻게 활성화할 수 있을까?

 현재 HTML 명세에 따르면 eventListener에 등록될 콜백 내에 event.preventDefault( ) 이 포함되는 경우 해당 기능이 활성화된다. 그러나 다양한 브라우저들이 구현하는 명세 및 지원 수준이 다르기 때문에, preventDefault 이외의 방식으로 확인창을 활성화 하는 경우도 있다. 결론적으로 콜백 내에 포함되어야 하는 내용은 다음과 같다.

1. event.preventDefault() : 현재 페이지를 벗어나는 동작을 일단 취소한다.
2. event.returnValue = 'string' : returnValue에 문자열 메시지를 등록한다.
3. return 'string' : 문자열을 반환한다.

이때 2, 3 에서 사용되는 문자열은 대부분의 브라우저에서 사실상 무시되므로, 어떤 값을 전달해도 상관 없다. 위 3가지 내용이 포함된 코드는 대략적으로 아래처럼 생겼다. 사실상 이외의 사용 방법도 현재는 없다.

window.addEventListener('beforeunload',(ev) => {ev.preventDefault(); return ev.returnValue = ""; })

 

결론

브라우저 환경에서 특정 사이트를 벗어날 때 사용자의 확인이 필요한 경우, beforeunload 이벤트를 이용하자.