HTML onpageshow 이벤트 속성 완벽 정리

HTML의 onpageshow 이벤트 속성은 사용자가 웹페이지에 접속하거나 페이지를 탐색하여 화면에 표시될 때 실행되는 이벤트입니다. 브라우저의 '뒤로 가기' 버튼으로 페이지에 다시 진입하는 경우에도 발생하기 때문에, 페이지 로드 시점마다 특정 동작을 수행해야 할 때 유용하게 활용할 수 있습니다.

문법(Syntax)

onpageshow 이벤트 속성의 기본 문법은 다음과 같습니다.

<body onpageshow="script"></body>

이제 실제 예제를 통해 onpageshow 이벤트 속성이 어떻게 동작하는지 살펴보겠습니다.

예제(Example)

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
</style>
<body onpageshow="showFn()">
<h1>HTML onpageshow Event Attribute Demo</h1>
<script>
    function showFn() {
        alert("Hey! you are on homepage");
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 브라우저에서 실행하면, 페이지가 표시되는 순간 자동으로 알림 창(alert)이 나타납니다.

HTML onpageshow 이벤트 속성 완벽 정리 – 문법과 예제 코드

알림 창의 '확인(ok)' 버튼을 클릭하면, 그때 비로소 HTML 문서의 본문 콘텐츠가 화면에 표시됩니다.

HTML onpageshow 이벤트 속성 완벽 정리 – 문법과 예제 코드

정리

onpageshow 이벤트는 window 객체에서도 window.onpageshow 형태로 사용할 수 있으며, 일반적인 onload 이벤트와 달리 캐시된 페이지로 다시 진입할 때도 항상 실행된다는 점이 큰 차이입니다. 따라서 방문자 추적, 상태 초기화 등 페이지 표시 시점에 반드시 처리해야 하는 로직을 구현할 때 onpageshow 이벤트 속성을 활용해 보세요.