Pages

2014년 2월 18일 화요일

[AJAX] AJAX 뒤로 가기 버튼 이슈 해결 방법

Ajax 프로그래밍을 할때 이슈가 되는 것중 하나는 “뒤로 가기” 버튼시 페이지가
전부 초기화 되는 것입니다.
IE를 제외한 다른 브라우져는 내부적으로 처리를 해줘서 간단한 스크립트로
처리가 가능합니다.  하지만 IE 같은경우는 그렇지가 않죠.
비록 현제 크롬 브라우져가 상승세에 있지만, 여전히 IE의 점유율은 1위
이기 때문에 무시 할수가 없습니다. 더욱이 한국에선 말이죠..
먼저 “뒤로 가기” 버튼 이슈를 해결 하기 위해서는 크게 2가지로 정리 됩니다.
(1) iFrame를 이용하는 방법
(2) anchor tags (a 태그)의 hash를 이용한 트릭 기법
iFrame같은 경우는 현재 구글에서 사용하는 방식 입니다. 실제로 GWT
같은경우 동일한 방법을 사용합니다.
하지만 제가 말씀 드리고자 하는건 두 번째 방식이 anchor를
이용한 처리 방식 입니다.
  • anchor tags의 hash란 ?
먼저 설명 하기 전에 anchor tags의 hash에 대해서 리뷰를
간략 하게 해보겠습니다.
이 기능은 “<a href=” 의  “name“속성에 이름을 선언 하면,
다른 링크 또는 URL 접근시 “#선언된 이름” 으로 해당 링크 부분을
찾아 갑니다. 역시나 예를 들어 봐야겠죠..
아래와 같이 anchor 태그를 선언 합니다.
<H2><A NAME=”purchasing”>Purchasing</A></H2>
다른 링크에서 위의 링크를 찾아 가기 위해서는 아래와 같이
해쉬값을 선업 합니다.
<A HREF=”anameexample.html#purchasing“>Purchasing</A>
주로 웹 사이트의 사이트 맵 또는 쇼핑몰에서 스크롤이 길어서 하단에서
최상단으로 화면 이동할때 사용을 합니다.
  • 뒤로 가기 버튼 메커니즘 이해
2
위의 그림을 보면 왼쪽은 “POST 호출” 방식이고, 오른쪽은
”Ajax 호출” 방식 입니다.
기본적으로 자바스크립트에서 window의 자식인 location 객체에서
URL의 정보를 저장하고 있습니다.
실제로 URL 정보를 location에 저장하는 주체는 “브라우져“가 그
역할을 합니다. 그래서 “뒤로가기” 버튼을 클릭하면 브라우져는
location에서 가장 최근 저장된 페이지의 URL 정보
(internal link 내부링크라고도 함.)를 가지고 페이지를 호출
하는 것입니다.
반면 “Ajax 호출” 방식인 경우는 브라우져 (브라우져 마다 들리겠죠..)
에서 Dom Object를 별도로 관리를 하지 않기 때문에
기존 모든 Dom이 사라지고, 페이지를 처음 접했을때의 상태가 됩니다.
  • 처리 방법
위에서 언급했던 부분을 이용해서 실제로 처리 하는 방법을
설명 하도록 하겠습니다.
3
위의 그림을 보면 전체 파랑색 Box는 “브라우져“를 나타냅니다.
“List.html” 페이지에서 “View.html“로 가기 위해서
“<a href=”링크를 클릭 합니다.
페이지로 이동하기 전에 “location.hash” 라는 저장소에
현재 페이지번호를 해쉬에 저장 합니다.
즉 “현재 2페이지” 였다면 “#2“라고 저장을 합니다. “View.html” 에서 “뒤로가기” 버튼을 클릭 합니다.
다시 돌아온 “List.html” 페이지에서 “window.onload” 에서
저장된 해쉬 값 (“#2”)를 가져와서 “#“부분을 “”으로 치환후
서버로 2페이지를 요청해서 이전 페이지의 상태를 초기화 시킵니다.
  • Sample 예제
역시나 개발자는 코드를 봐야 이해를 하시겠죠.^^
간략하게 샘플을 만들어 봤습니다.
샘플 예제는http://bit.ly/sfPzN2 에서 다운 받으시기 바랍니다.
※ 참고로 jQuery로 작성을 했습니다. 하지만 코드 자체가 복잡하지
않기 때문에 소스리뷰 하시는데 큰 지장은 없을거라고 생각 합니다.
다운로드 받은 파일을 열어 보면 2개의 html을 볼수 있는데
기능은 동일하고, 하나는 “뒤로 가기” 기능이 적용된 것이고 나머지는 적용되지 않은
소스 입니다.
먼저 적용되지 않은 소스 입니다. “NoBack.html”
4
버튼을 누르면 “div”에 현재 페이지가 display 됩니다.
아래 “Google”이란 링크를 클릭해서 이동 해보겠습니다.
5
여기서 “뒤로 가기” 버튼을 클릭하면 아래와 같이
기존에 있던 페이지 정보가 사라집니다.
6
“뒤로 가기“가 적용된 소스를 설명 하겠습니다. “Back.html“
7
8
아래와 같이 기존 정보를 유지 합니다.
9
<script type=”text/javascript”>
var i = 0;
$(document).ready(function() {

    var currentPage = 1;
    checkForHash();

    $(‘#btn1’).add(‘#btn2’).add(‘#btn3’).bind(‘click’, function(e) {
        currentPage = $(this).val();
        showPage($(this).val());
    });

    $(‘#link’).bind(‘click’, function(e) {
        document.location.hash = “#” + currentPage;
    });
});

function checkForHash() {
    if(document.location.hash){
        var HashLocationName = document.location.hash;
        HashLocationName = HashLocationName.replace(“#”,”“);
        $(“#display”).html(HashLocationName)
    } else {
        $(“#display”).html($(‘#btn1’).val())
    }
}

function showPage(value) {
    $(“#display”).html(value)
}
</script>
</head>
<body>
<div id=”display”></div>
<input type=”button” value=”1” id=”btn1”>&nbsp;
<input type=”button” value=”2” id=”btn2”>&nbsp;
<input type=”button” value=”3” id=”btn3”>&nbsp;
<br/>
<a href=”http://www.google.com” id=”link”>Google :)</a>
(1) “<a href” 를 클릭 합니다.
(2) “$(‘#link’).bind” 이벤트 메서드가 발행해서 location.hash에
현재 페이지를 저장 합니다.
(3) 이후 이전 페이지에서 “뒤로가기”버튼을 클릭하면
window.onload시 “checkForHash()” 를 실행 합니다.
그리고 var HashLocationName = document.location.hash를 통해서 이전에 기록된 해쉬값을 가져와서 페이지를 초기화 합니다.
소스가 복잡하지 않아서 무리없이 보실거라 생각합니다.
현재 제가 개발하고 있는 관리자 화면에서 잘 사용중입니다. ^^
개발하실때 잘 유념하시기 바라며, 특히나 가끔 개발자들이
IE를 사용하지 않고, 다른 브라우져를 사용해서 간과하는 경우가
종종 있습니다.
반드시 유념하시면서 개발 하시기 바랍니다.

참고 사이트

시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)