사용자가 입력 도중 실수로 페이지를 새로고침하거나 다른 곳으로 이동하면 작성한 내용이 모두 사라져 불편을 겪게 됩니다. 이런 상황을 방지하려면 onbeforeunload 이벤트를 활용하여 사용자에게 확인 경고창을 띄워줄 수 있습니다.
beforeunload 이벤트란?
beforeunload 이벤트는 사용자가 페이지를 떠나기 직전에 발생합니다. 이 이벤트 핸들러에서 문자열을 반환하면 브라우저가 자동으로 "페이지를 나가시겠습니까?"와 같은 확인 대화상자를 표시하고, 사용자가 취소를 선택하면 페이지 이동이 중단됩니다. 주의할 점은 최신 브라우저들이 보안상의 이유로 개발자가 지정한 사용자 정의 메시지는 무시하고 자체 기본 문구만 보여준다는 점입니다.
예제
다음은 폼에 저장되지 않은 변경 사항이 있을 때 경고를 표시하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input {
margin: 10px;
}
</style>
</head>
<body onbeforeunload="return pageUnload()">
<h1>폼의 저장되지 않은 변경 사항 경고</h1>
<form>
Username <input type="text" />
<br />
Password <input type="password" /><br />
<button type="submit">SUBMIT</button>
</form>
<br />
<script>
function pageUnload() {
return "이 페이지를 벗어나면 입력한 데이터가 사라집니다";
}
</script>
</body>
</html>코드 설명
<body> 태그에 onbeforeunload="return pageUnload()" 속성을 추가하면 페이지가 닫히거나 새로고침되기 직전에 pageUnload() 함수가 호출됩니다. 이 함수는 문자열을 반환하며, 이 반환값이 있으면 브라우저가 경고 대화상자를 띄워 사용자에게 페이지 이동 여부를 다시 한번 확인하게 됩니다.
출력 결과
위 코드를 실행하면 아이디와 비밀번호를 입력할 수 있는 간단한 로그인 폼이 화면에 나타납니다. 이 상태에서 새로고침 버튼을 클릭하면 아래와 같은 경고창이 표시됩니다.
경고창에서 "다시 로드" 또는 "나가기"를 선택하면 페이지가 이동되어 입력한 데이터가 사라지고, "취소"를 선택하면 현재 페이지에 그대로 머물러 작성한 내용을 유지할 수 있습니다.