DOM PageTransitionEvent(페이지 전환 이벤트)는 사용자가 웹페이지 사이를 이동할 때 발생하는 이벤트입니다. 특히 브라우저의 뒤로 가기·앞으로 가기 버튼을 눌렀을 때 해당 페이지가 캐시에 저장되어 있는지 확인하는 용도로 자주 활용됩니다.
PageTransitionEvent 객체의 속성
| 속성 | 설명 |
|---|---|
| persisted | 웹페이지가 브라우저에 캐시되어 있으면 true, 그렇지 않으면 false를 반환합니다. |
PageTransitionEvent 객체의 이벤트 종류
| 이벤트 | 설명 |
|---|---|
| pageHide | 사용자가 현재 웹페이지를 떠나 다른 페이지로 이동할 때 발생합니다. |
| pageShow | 사용자가 특정 웹페이지로 진입할 때 발생합니다. |
예제
다음은 PageTransitionEvent 객체를 활용한 예제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
color:#fff;
background: #ff7f5094;
height:100%;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM PageTransitionEvent Event Demo</h1>
<button onclick="checkPage(event)" class="btn">Click me</button>
<script>
function checkPage(event) {
if (event.persisted) {
confirm("Page was cached by the browser");
} else {
confirm("Page was not cached by the browser");
}
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 아래와 같은 화면이 나타납니다.
Click me 버튼을 클릭하면, 해당 페이지가 브라우저에 캐시되었는지 여부를 확인 대화상자를 통해 알려줍니다.
참고 사항
persisted 속성은 일반적으로 pageshow 이벤트 핸들러 안에서 확인하는 것이 좋습니다. 사용자가 뒤로 가기로 돌아왔을 때 페이지가 캐시에서 복원되었다면 true가 반환되므로, 이를 활용하면 불필요한 데이터 재요청을 줄이고 페이지 로딩 성능을 개선할 수 있습니다.