기타치는 개발자의 야매 가이드

ajax를 사용해 화면을 전환하거나 페이지를 이동하는 경우

생각치 못했던 문제에 봉착했다

뒤로가기가 안된다는것!!!!!

사이트 내부를 이리저리 왔다갔다 하다 뒤로가기를 눌럿는데 바로 메인으로 점프 해버리는 상황이 발생한 것이다.

그렇다고 전부 갈아 엎어버릴수도 없고 이것저것 찾아보던 와중

해쉬뱅(hashbang) 이라는 것과 Pjax 라는 것을 발견했다

어떻게 사용해야 하는지 이리저리 블로그를 뒤져보고 스택오버플로우를 뒤져봐도

당췌 어떻게 사용해야 하는지 모르다가 클라이언트 쪽의 대리님의 도움으로 어느정도 감이 잡혔다.

그리고 나는 야매개발자 답게 제대로된 해쉬뱅이나 pjax방법을 사용하지 않고 꼼수를 부렸지만

해결은 했다 

먼저 해쉬뱅은 URL에 #! 을 붙여서 (앵커라고 하는것 같다) 사용 하는 방법인데 이해도 못하겠고

URL창이 지저분해 보여 패스하고 

history.pushState를 사용하는 방법을 이용했다.

전자의 경우 어느정도 브라우저에 자유로운 방법이고

후자는 익스플로러 10 이상 버전과 파폭 크롬에서만 동작 하는 방법이다

다행이도 클라이언트가 익스플로러는 최신 버전을 사용한다고 하여 마음 놓고 사용할 수 있었다.

방법은 간단하다!!!

history.pushState(데이터,타이틀,URL);

history.pushState를 사용하는 방법인데 

원래대로 라면 저기에 html데이터라든지 URL을 넣는다는지 하는 방법을 사용하지만

제대로된 사용법을 알기엔 경험과 능력이 미천하여 꼼수를 부렸다

저 히스토리에 데이터 라고 써있는 인자를 

var data = event.originalEvent.state;

이것으로 불러 올 수가 있는데 이 방법을 응용했다

일단 

페이지가 이동하는 이벤트에 

history.pushState(데이터,타이틀,URL); <- 데이터 부분에 Ajax로 요청하는 URL을 넣는다

그러면 페이지를 이동하는 이벤트가 발생할때마다 히스토리에 URL이 쌓이게 된다.

아래 펑션은 브라우져에서 뒤로가기나 앞으로 가기 이벤트가 발생했을때 실행되도록 하는 함수이다

$(window).bind("popstate", function(event) {

    var data = event.originalEvent.state;  // 이부분으로 뒤로가기 할때마다 아까 저장한 히스토리 스택에 쌓인 URL을 불러 온다

    if(data){ // 데이터가 있으면 해당 데이터를 ajax로 다시 요청해 화면에 뿌려준다!!!!

// 아래 코드는 필자가 켄도UI의 스플리터기능으로 화면을 뿌려주기에  작성한 것이다

// 다른 사람들은 각자 화면을 요청하는 AJAX펑션을 넣으면 되겠다.

    var splitter = $("#layout-vertical").data("kendoSplitter");

splitter.ajaxRequest("#article-pane",data);

    }

    else{

    // 히스토리에 정보가 없을경우 메인화면으로 보내준다.

    var url = "/메인화면";    

    $(location).attr('href',url);

    }

아주 간단하게 해결이 되었다!!!!

주의할점은 

if(data){ // 데이터가 있으면 해당 데이터를 ajax로 다시 요청해 화면에 뿌려준다!!!!

// 아래 코드는 필자가 켄도UI의 스플리터기능으로 화면을 뿌려주기에  작성한 것이다

// 다른 사람들은 각자 화면을 요청하는 AJAX펑션을 넣으면 되겠다.

     var splitter = $("#layout-vertical").data("kendoSplitter");

splitter.ajaxRequest("#article-pane",data);

    }

이부분에서 화면이동 하는 펑션으로 보내주는 경우 그 펑션엔

history.pushState(데이터,타이틀,URL);

이게 없어야 한다

이유는 뒤로가기를 했는데 거기다 또 히스토리에 뒤로가기한 URL을 저장해 버려 꼬이는 경우가 생기기 때문이다.

제 포스팅이 도움이 되었나요? 

그렇다면 공감하기 한번 눌러주세요 블로거에게 큰 힘이 됩니다