Ajax 뒤로가기 구현
JavaScript 2010. 7. 26. 06:48 |상단 Tab으로 구성된 화면에서 각 탭의 컨텐츠를 Ajax를 통하여 불러왔는데, "뒤로가기"이슈가 발생했다. 서비스 오픈 후, 해당 페이지에서 뒤로가기 버튼을 누르는 사용자가 얼마나 되는지 통계를 내봐야겠다.
여러가지 자료를 찾다보니 RSH 프레임웤, Prototype을 통한 해결방법이 나왔는데, 둘 다 완전하지 못했다.
RSH는 IE에서 제대로 동작을 하지 않았으며(로컬 컴퓨터에서 바로 실행하였을 경우 제대로 작동하였으나, 서버 위에 올려놓고 구동시키면 history가 뒤죽박죽이 되어버리는 현상이 발견되었다. 서버 로그를 살펴보니 RSH에서 내부적으로 컨트롤하는 blank.html이 제대로 호출되지 않고 있었다. 뒤로가기 버튼을 누를 때바다 호출 되어져야 하는데, 간헐적으로 호출되고 있었다.)
Prototype을 이용한 뒤로가기 구현은 setTimeout을 이용한 history 목록관리를 통하여 해당 이슈를 해결하고 있었는데, 구현 내용이 깔끔하고 간단해 보이지 않아 도입을 포기하였다.
이래저래 고민하다가 결국 아래와 같이 구현하였다.
(timer는 jQuery에서 timer검색하여 나온 플러그인 중 제일 첫 번째 놈 가져다 썼음)
<script language="JavaScript" type="text/JavaScript" src="jquerytimer-min.js"> </script>
// 일정 시간마다 현재 url검사하여 뒤로가기 구현
var currentResource="";
jQuery.fjTimer({ interval: 200, repeat: true, tick: function(counter, timerId) {
if( currentResource!='' ) {
if('#'+currentResource!=window.location.hash) {
loadAjaxData(window.location.hash.replace("#", ""));
}
}
}});
// 데이터 로딩
function loadAjaxData(resource) {
location.href = '#'+resource;
currentResource = resource;
-- 이하 실제 데이터 불러오고 화면 갱신하는 내용
}
대충 구현해보고 산뜻하게 정리해보려 했는데, 잘 작동 되길래 그대로 놔뒀다.
잘 작동되니 희한하네ㅡ.ㅡ;
'JavaScript' 카테고리의 다른 글
| 구현한 놈들 (0) | 2010.08.06 |
|---|---|
| 정규식 (0) | 2010.07.26 |
| image resize(비율유지) (0) | 2010.07.04 |
| Email체크(jQuery UI에서 발췌) (0) | 2010.06.22 |
| 많이 사용하는 jQuery Selector (0) | 2010.06.17 |