102. (jquery/제이쿼리) pageshow 이벤트 사용해 웹 페이지 새롭게 로드 및 복원 여부 확인 - page show

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : jquery

​

 

---

[소스 코드]

​

    <!-- ===================================================================================================== -->
    <!-- [CDN 주소 설정] -->
    <!-- ===================================================================================================== -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <!-- ===================================================================================================== -->






    <!-- ===================================================================================================== -->
    <!-- [자바스크립트 코드 지정] -->
    <!-- ===================================================================================================== -->
    <script>


        // =======================================================================
        // [요약 설명]
        // =======================================================================
        /*
        --------------------------------------------------------------------------
        1. window.onload : 웹 페이지 로드 완료 시 호출 됩니다 (css , js 로드 완료)
        --------------------------------------------------------------------------
        2. window.onpageshow : onload 이벤트 뒤에 호출 되며, persisted 값으로 웹페이지 새롭게 로드 및 복원 여부를 확인할 수 있습니다
        --------------------------------------------------------------------------
        */





        // =======================================================================
        // [자바스크립트 라이프 사이클 및 상태 변경 감지 부분]
        // =======================================================================

        // [페이지 show 이벤트]
        $(window).bind("pageshow", function(event) {
            if (event.originalEvent.persisted) {
                console.log("");
                console.log("=========================================");
                console.log("[window onpageshow] : [BFCahe 로 부터 웹 페이지 복원 됨]");
                console.log("=========================================");
                console.log("");
            }
            else {
                console.log("");
                console.log("=========================================");
                console.log("[window onpageshow] : [새롭게 열린 웹 페이지]");
                console.log("=========================================");
                console.log("");
            }
        });


    </script>

 

---

[결과 출력]

​

---