사용자가 HTML 페이지를 떠날 때 스크립트 실행하기 – onpagehide 속성 활용법

onpagehide 속성이란?

HTML의 onpagehide 속성은 사용자가 현재 페이지를 떠나 다른 곳으로 이동하는 순간, 미리 지정해 둔 스크립트를 자동으로 실행해 주는 이벤트 핸들러입니다.

여기서 말하는 '페이지 이동'은 다음과 같은 다양한 상황을 포함합니다.

• 페이지 내 링크를 클릭해 다른 페이지로 이동할 때
• 브라우저 탭이나 창을 닫을 때
• 폼(form)을 제출할 때
• 다른 탭으로 전환하거나 앱을 종료할 때

onpagehide 사용 방법

방법 1. HTML 속성으로 직접 지정하기

요소에 onpagehide 속성을 추가하고 실행할 함수 이름을 값으로 넣으면 됩니다.

<p onpagehide="myScript">

방법 2. JavaScript로 객체에 할당하기

스크립트 내에서 이벤트 핸들러를 동적으로 등록할 수도 있습니다.

object.onpagehide = function(){ script };

활용 시 참고 사항

onpagehide 이벤트는 주로 body 요소나 window 객체에 적용되며, 페이지가 화면에서 사라지기 전에 사용자 입력 데이터를 임시 저장하거나 리소스를 정리하는 등의 마무리 작업을 수행하는 데 유용합니다.

또한 최신 브라우저 환경에서는 visibilitychange 이벤트와 함께 사용하면 탭 전환 등 더 세밀한 상태 변화까지 감지할 수 있어, 보다 안정적인 페이지 생명주기 관리가 가능합니다.