[jQuery] 해쉬체인지를 이용한 AJAX 게시판에서 뒤로가기(back) 기능 구현

■ [jQuery] 해쉬체인지를 이용한 AJAX에서 뒤로가기(back) 기능 구현

AJAX 게시판 기능 구현중 리스트(List)영역에서 뷰(View) 영역으로 이동 후 뒤로가기 버튼을 눌렀을때 다시 게시판 리스트 페이지로 이동하지 못하는 문제가 발생하였는데 해당 포스팅(http://www.erzsamatory.net/29) 내용을 참고하여 해결할 수 있었다.

이 포스팅은 참고한 포스팅에서 필자에게 필요한 부분만 뽑아서 다시 정리한 것이다.

hashchange_wicked.php

출력결과

위와같이 해결 할 수 있었다.

※ 출처 : 해시체인지 이벤트를 활용하여 페이지 이동을 최대한 줄이는 방법(http://www.erzsamatory.net/29)

hashchange.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>해쉬체인지</title>
    <script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script type="text/JavaScript">
        // 해쉬가 변경되었을 때 실행된다.
        $(window).on('hashchange', function () {
            goToFromHash();
        });

        // 윈도우가 모드 로드되었을 때 실행한다.
        // goToFromHash() 함수에 매개변수를 넣음으로써 윈도우 로드 후 가장 처음 실행되는 함수임을 알린다.
        // 매개변수를 전달함으로써 해쉬가 변경되지 않는 상황에 대처할 수 있다.
        $(window).on('load', function () {
            goToFromHash('onload');
        });

        // 해쉬를 분석하여 적당한 페이지로 이동할 때 사용하는 함수
        function goToFromHash(a) {

            // 해쉬태그에서 맨 앞의 #을 제거하고 공백을 %20으로 치환한다.
            // 해쉬태그를 쉽게 분석하기 위한 작업한다.
            var hashtag = location.hash.substring(1, location.hash.length).replace(/ /gi, '%20');

            // 태그 페이지의 이중 주소 정규표현식
            var tag = /^tag\/([\s|0-9|a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힝|\-|\_]+)$/i;

            // 글 목록 페이지의 이중 주소 정규표현식
            var archive = /^archive\/([0-9]+)$/i;
            var category = /^category\/([\s|0-9|a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힝|\%|\/]+)$/i;

            // 검색 페이지의 이중 주소 정규표현식
            var s = /^search\/([\s|0-9|a-z|A-Z|ㄱ-ㅎ|ㅏ-ㅣ|가-힝|\%|\/|\-|\_|\[|\]]+)$/i;

            // 스크립트에서 정한 해시를 입력한 경우에만 해시체인지 함수를 실행하도록 한다. (보안)
            // 자바스크립트에서 정규표현식을 어떻게 적용하는지 주의깊게 살펴본다.
            if(
                hashtag == 'guestbook' ||
                hashtag == 'tag' ||
                hashtag == 'location' ||
                hashtag == 'keylog' ||
                tag.test(hashtag) ||
                archive.test(hashtag) ||
                s.test(hashtag)
            ) {
                // ID가 content인 블럭의 내용을 해당 해시에 맞는 내용으로 바꿉니다. (실시간)
                jQuery('#content').load('http://www.erzsamatory.net/'+hashtag+' #content');

                // 내용이 변경되었으니 스크롤바를 최상단으로 옮깁니다.
                jQuery(window).scrollTop(0);
            }

            else if (category.test(hashtag) || hashtag == 'category') {

                // 글 목록 페이지를 이동시킬 때 실행되는 작업입니다. 이중 주소를 처리합니다.
                jQuery('#content').load('http://www.erzsamatory.net/'+hashtag+' #content');
                jQuery(window).scrollTop(0);
            }

            else if (hashtag == 'home') {

                // 해시가 home일 때 실행한다.
                jQuery('#content').load('http://www.erzsamatory.net/ #content');
                jQuery(window).scrollTop(0);
            }

            else if (!hashtag && a != 'onload') {
                // 매개변수로 'onload'가 입력되지 않았을 때,
                // 해시가 비어있을 때 새로고침합니다.
                // 해시가 없는 페이지로 뒤로가기를 하였을 때를 대처하기 위한 스크립트입니다.
                location.reload();
            }
        }
    </script>
</head>
<body>
    <div style="padding:10px; font-size:12px;">
        <a href="#home">홈</a>
        <a href="#tag">태그</a>
        <a href="#tag/웹프로그래밍">|웹프로그래밍 태그|</a>
        <a href="#category">글 목록</a>
        <a href="#category/컴퓨터 및 첨단기술">|컴퓨터 및 첨단기술|</a>
        <a href="#guestbook">방명록</a>
    </div>
    <div style="height:30px;"></div>
    <div id="content" style="border:3px solid #efefef;"></div>
</body>
</html>

출력결과

저작자표시

'jQuery' 카테고리의 다른 글

[jQuery] DIV로 레이어 팝업창 만들기 (0)	2015.07.25
[jQuery] 순차적 선택 (0)	2015.06.11
[jQuery] append vs html 비교 (0)	2015.05.22
[jQuery] jQuery Ajax 부가 메서드 (0)	2015.05.10
[jQuery] jQuery Ajax의 기초 (0)	2015.05.10

사악미소의 현대마법의 공방

[jQuery] 해쉬체인지를 이용한 AJAX 게시판에서 뒤로가기(back) 기능 구현

'jQuery' 카테고리의 다른 글

티스토리툴바

[jQuery] 해쉬체인지를 이용한 AJAX 게시판에서 뒤로가기(back) 기능 구현

'jQuery' 카테고리의 다른 글

'jQuery' Related Articles

티스토리툴바