[JavaScript] 브라우저 뒤로가기 이벤트 제어하기

브라우저 뒤로 가기를 실행했을 때 특정 이벤트를 실행해주는 방법에 대해 알아보자.
 

1. BF캐시 (Back Forward Cache)

BF캐시란 브라우저에서 발생하는 최적화 기능으로 브라우저의 뒤로 가기 버튼, 앞으로 가기 버튼을 눌렀을 때 화면을 바로 보여주는 역할을 해주며 자바스크립트를 포함하여 페이지 전체를 캐시로 저장해주는 기능을 가진다.
 
웹사이트 방문 시 특정 페이지에 들어갔다가 뒤로 가기를 하면 뒷페이지 로딩 속도가 굉장히 빠른데 이것이 bfcache 사용 예시라고 볼 수 있다. bfcache는 네트워크 연결을 하지 않기 때문에 리소스 다운로드 과정이 생략되어 데이터 사용량을 줄일 수 있습니다.
 

2. 브라우저 뒤로 가기 이벤트 제어하기

bfcache를 감지할 수 있는 이벤트는 pageshow, pagehide(페이지 전환 이벤트)가 있다.  브라우저 뒤로가기 버튼을 눌렀을 때 페이지가 reload 되도록 해보자. event.persisted 가 true인 경우 브라우저 뒤로 가기로 인식하여 location.reload(); 로 페이지가 재로딩될 수 있도록 할 수 있다.

window.onpageshow = function(event) {
    if (event.persisted) {  //이벤트 상태가 뒤로가기
        alert("브라우저 뒤로가기 버튼이 클릭됨");		
        location.reload();      
    } 
}

 
위 코드로 적용되지않는 경우, 브라우저 히스토리 변경을 감지하는 방식인 popstate 를 이용하면 된다.

window.onpopstate = function(event) {
    alert("브라우저 뒤로가기 버튼이 클릭됨2");
    location.reload();
};

history.pushState(null, null, window.location.href);

 

Html 아이콘 제작자: DinosoftLabs - Flaticon

---

출처: https://mozzi-devlog.tistory.com/24, OpenAI ChatGPT (https://openai.com)