Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML에서 브라우저 히스토리가 변경될 때 스크립트 실행하기 – onpopstate 이벤트 완벽 가이드

브라우저의 세션 기록(히스토리)이 변경되면 onpopstate 이벤트가 자동으로 발생합니다. 사용자가 브라우저의 뒤로 가기 또는 앞으로 가기 버튼을 클릭하거나, JavaScript에서 history.back(), history.forward(), history.go() 같은 메서드가 호출될 때 이 이벤트가 트리거됩니다.

이 이벤트를 활용하면 페이지를 새로고침하지 않고도 히스토리 상태 변화에 반응하는 동적인 웹 애플리케이션을 만들 수 있습니다.

기본 사용 예제

가장 간단한 방법은 <body> 태그에 직접 이벤트 속성을 추가하는 것입니다.

<!DOCTYPE html>
<html>
   <body onpopstate = "onpopstateFunction()">

      <p>This is demo text</p>

   </body>
</html>

위 코드에서는 히스토리가 변경될 때마다 onpopstateFunction() 함수가 호출됩니다.

addEventListener로 등록하기

더 유연하고 권장되는 방식은 JavaScript의 addEventListener() 메서드를 사용하는 것입니다.

window.addEventListener('popstate', function(event) {
   console.log('히스토리 상태가 변경되었습니다:', event.state);
});

event.state 객체 활용

popstate 이벤트 핸들러는 event.state 속성을 통해 해당 히스토리 항목에 저장된 상태 객체(state object)에 접근할 수 있습니다. 이 상태 객체는 history.pushState()나 history.replaceState()로 미리 저장해 둔 데이터입니다.

history.pushState({ page: 1 }, '페이지 1', '?page=1');

window.addEventListener('popstate', function(event) {
   if (event.state) {
      console.log('현재 페이지:', event.state.page);
   }
});

주의사항

  • popstate 이벤트는 새로운 히스토리 항목이 추가될 때는 발생하지 않으며, 오직 히스토리 항목 간 이동(탐색)이 일어날 때만 발생합니다.
  • 일부 브라우저에서는 페이지 로드 시점에 popstate 이벤트가 불필요하게 발생할 수 있으므로, 실제 상태 값이 존재하는지 확인하는 것이 안전합니다.
  • SPA(싱글 페이지 애플리케이션)에서 라우팅을 구현할 때 매우 유용하게 활용됩니다.