웹 개발을 하다 보면 사용자가 페이지를 떠나기 직전에 특정 작업을 수행해야 하는 경우가 있습니다. 예를 들어, 저장하지 않은 변경 사항이 있을 때 사용자에게 경고를 표시하거나, 페이지 이탈 전에 데이터를 정리해야 할 수 있죠.
이럴 때 사용하는 것이 바로 onbeforeunload 이벤트 속성입니다. 이 이벤트는 문서가 언로드(unload)되기 바로 직전, 즉 사용자가 페이지를 닫거나 새로고침하거나 다른 페이지로 이동하려는 순간에 실행됩니다.
onbeforeunload 이벤트의 주요 용도
- 저장되지 않은 데이터가 있을 경우 사용자에게 확인 메시지 표시
- 페이지 이탈 전에 필요한 정리 작업(cleanup) 수행
- 실수로 창을 닫는 것을 방지하여 사용자 경험 향상
사용 예시
아래 코드를 실행한 후 창을 닫거나 F5(새로고침) 키를 눌러보세요. 페이지를 떠나기 전에 확인 대화 상자가 나타나는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body onbeforeunload = "return display()">
<p>이 창을 닫거나 F5 키를 눌러보세요.</p>
<script>
function display() {
return "여기에 머무르시겠습니까, 아니면 떠나시겠습니까?";
}
</script>
</body>
</html>동작 방식 설명
위 예시에서 <body> 태그에 onbeforeunload 속성이 지정되어 있습니다. 사용자가 창을 닫거나 새로고침을 시도하면 display() 함수가 호출되어 문자열을 반환하고, 브라우저는 이를 근거로 "정말 페이지를 떠나시겠습니까?"와 같은 확인 대화 상자를 표시합니다.
참고 사항
- 대부분의 최신 브라우저에서는 보안상의 이유로 개발자가 지정한 사용자 지정 메시지가 아닌 브라우저 기본 메시지만 표시됩니다.
- 이 이벤트는 남용할 경우 사용자 경험을 해칠 수 있으므로, 꼭 필요한 경우에만 사용하는 것이 좋습니다.
- 모바일 브라우저 일부에서는 해당 이벤트가 제대로 동작하지 않을 수 있습니다.