Back Forward Cache 익스, 크롬, 사파리, 파이어폭스 뒤로가기 이벤트

Back Forward Cache 익스, 크롬, 사파리, 파이어폭스 뒤로가기 이벤트

---

크롬 브라우저 76 버전 까지는 잘되던 소스가 79 이상부터는 먹히지 않았다.

과정은 아래와 같았다.

input의 checkbox를 체크 하고 페이지 이동이 이루어진 다음 뒤로가기를 통해 돌아온 경우

checkbox의 체크가 풀려있지 않지만 페이지의 로딩이 다시 이루어지지 않기 때문에

$(function() {}) 내의 소스들이 호출이 되지 않았다.

이 부분을 구글링한 결과 Back Forward Cache라는 것 때문에 되지 않았던 것이다.

Back Forward Cache 란 브라우저의 뒤로가기시 브라우저가 단일 세션내에서

자바스크립트 상태 및 웹 페이지를 전체를 캐싱함으로써 전체적은 응답속도를 빠르게 동작하기위해

사용되는 캐시입니다.

이 캐시는 페이지에 대한 추가적인 로딩을 하지않고 자바스크립트 상태 까지 유지하고 있기 때문에

페이지 로딩시 반드시 한번 호출되어야 하는 자바스크립트가 있다면 호출되지 않기 때문에 문제가 발생할 수 있습니다.

라고 https://dev-t-blog.tistory.com/9 여기서 친히 설명해주었다.

따라서 아래와 같이 스크립트를 수정하면 뒤로가기 이벤트를 잡아낼 수 있었다.

window.onpageshow = function(event) {
    if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {
        // Back Forward Cache로 브라우저가 로딩될 경우 혹은 브라우저 뒤로가기 했을 경우
        // 이벤트 추가하는 곳
    }
}

결과는 아주 잘된다. 대만족