모바일 브라우저에서 Back 버튼 클릭시 페이지 강제 리로딩 하기

모바일 쇼핑몰 솔루션 작업을 진행하다 보니 새로운 것도 참 많이 알게 된다. swipe 이벤트를 이용해서 이전, 다음 상품을 보여주려고 스크립트를 작성하고 있는데 글쎄 생각지도 못했던 캐시 문제가 발생했다. 왼쪽으로 swipe 하면 화면 전체가 왼쪽으로 애니메이션으로 이동하도록 하는데 기존 페이지의 컨텐츠를 복제해서 레이어를 생성하고 이 레이어가 이동하는 것이다. 그동안 원래 컨텐츠의 모든 엘리먼트는 hidden으로 처리하고 말이다.

그런데 이렇게 했을 때 브라우저에 Back 버튼을 클릭하게 되면 컨텐츠가 표시되지 않고 레이어 이동 애니메이션이 끝난 상태, 즉 모든 엘리먼트가 숨겨진 상태의 페이지가 표시된다. 이건 절대로 원했던 것이 아니다. 그래서 자료를 좀 찾아보니 back-forward cache 라고 해서 페이지가 이동 되면 이전 페이지의 모든 상태를 캐시에 저장하고 Back 버튼을 누르면 이 캐시의 데이터를 가져와서 화면에 표시해준다고 한다. 좋은 기능이긴 한데 작업에는 방해가 되는 요소였다.

그래서 생각한 방법이 back-forward cache 의 데이터를 보여주는 것이라면 이것을 체크해서 강제로 페이지를 리로딩하도록 하는 것이었다. 아래는 그 코드이다.

<script>
$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        document.location.reload();
    }
});
</script>

pageshow 라는 이벤트가 있는데 이 이벤트가 발생하면 함수를 실행해서 페이지가 리로딩 되는 것이다.

jQuery가 아닌 JavaScript를 사용한 방법은 아래와 같다.

window.onpageshow = function(event) {
    if (event.persisted) {
        document.location.reload();
    }
};

참고자료: http://stackoverflow.com/questions/11979156/mobile-safari-back-button