Ajax의 브라우저 Back버튼 대응 방법

플래시든 Ajax든, 접근성이 떨어진다는 평을 듣는 가장 불편한 점 한가지는 바로 브라우저의 Back버튼을 사용할 수 없다는 점이다. 다시말해, 열심히 AJAX(아니면 플래시) 내부 컨텐츠에서 네비게이션을 진행하는 가운데, 브라우저의 Back버튼을 누르는 순간 해당 컨텐츠로 접근했던 시작 점을 이탈하게 되는 것이다.

허나 이것은 location의 hash구조를 사용하면 해결할 수 있다.

야후 맵의 플래시 네비게이션은 이러한 방식으로 Back버튼에 대한 대응을 하고 있다.



http://maps.yahoo.com/beta/index.php#maxp=
search&mvt=m&q1=sfo&trf=0&lon=-122.431254&lat=37.635492&mag=3

Hash는 URL뒤에 #과 함께 나타나는 구조로 내부 컨텐츠에 대한 정보를 저장해둔 다음, 이것을 Back버튼을 누르는 행동에 따라 해당 위치값을 다시 뿌려주는 방법으로 Back버튼에 대응한다.

AJAX: How to Handle Bookmarks and Back Buttons 글을 참고하면 다양한 방법을 사용할 수 있다. 하지만 이 방법의 단점은 setInterval()을 사용하여 지속적으로 URL이 바뀌는 것을 체크하며(CPU나 메모리 점유율에 있어서 그다지 실행성능의 하락은 없지만), 파이어폭스는 제대로 적용할 수 있지만, 익스플로러는 iframe과 연동해야 한다. 그리고 사파리는 URL의 hash는 지원하지만 Back버튼 클릭을 체크할 수 없다(현재까지 알려진 바로는...)

참고로 가장 단순화 시킨 Back버튼 대응방법을 네이버 실시간 검색어 뉴스 탐색기에 적용해 보았다.

var currentLocation = '';

function goEntry(){
var str = window.location.toString();
var uriArray = str.split('#');
var keyword = uriArray[1];
if(keyword == undefined){
// 키워드가 없을 떄, 매핑된 Ajax 페이지로 이동
}else{
// 키워드에 매핑된 Ajax 페이지로 이동
}
currentLocation = keyword;
}
function setURI(str){
var keyword = encodeURIComponent(str);
window.location.hash = keyword;
currentLocation = keyword;
}
function checkLocation(){
var str = window.location.toString();
var uriArray = str.split('#');
var keyword = uriArray[1];
if(currentLocation != keyword){
goEntry();
}
}
function startCheck(){
setInterval(checkLocation, 300);
}
function init(){
goEntry();
startCheck();
}