– 주의 –

아래 팁은 파이어폭스, 크롬, 사파리등의 브라우저에서만 먹히며, 인터넷 익스플로러(9버전 이하 버전만 해당. 10버전 이상은 지원)는 Hash를 이용하거나 포기해야함.

어느날 웹개발에 미쳐있는 한 후배가 나한테 채팅으로 말 걸어왔다.

후배 : 횽!!!

나 : 왜?

후배 : http://ex.fm/ 여기 좀 봐주세요!

나 : 이 사이트가 뭐? (도메인이 좀 끝내주네)

후배 : 메뉴 클릭하면 페이지 내용 전체가 안 바뀌고 Ajax 로 내용만 불러오는데 주소가 바껴요! 이런거 만들고 싶은데 어떻게 해요?

이 같은 경우 간단하게 Javascript 소스 한 줄로 끝 낼 수 있다.

history.pushState(data,title,url);

위 처럼 history의 pushState메소드를 이용하면 된다. 인자는 다음과 같다.

data : 세션 히스토리에 넣을 데이터이다. Data Object 형식이어야 하고, 필수지만 순수 타이틀만 변경할 목적이면 아무렇게나 넣어도 크게 상관 없는 듯하다. (넣을 것이 없으면 그냥 빈 String으로(”) 넣어준다.

title : 페이지 제목이다. 현재 몇몇 브라우저에서는 이걸 그냥 무시하는데 일부 브라우저에서는 이게 동작하고 동작하지 않는 브라우저도 차후에 지원될 수 있기 때문에 짧게나마 넣어주는 것이 좋다.

url : 변경시킬 URL이다.

Ajax를 이용하여 다음과 같이 응용할 수 있다.

$.ajax({
url:”불러올 페이지 경로”,
success:goodToGo,dataType:”html”,
data:””,
error:ohShit
}); // 페이지 부르기

goodToGo = function(data, textStatus, jqXHR){ // 정상적으로 되었을 때
$(“#content”).html(data); // 내용 넣어주고
history.pushState({“html”:data},pageTitle, pageUrl); // 제목과 URL 바꾸기. 만약 pageUrl 변수에 ‘licence’라는 값이 들어가 있다면 주소창에는 ‘http://www.domain.com/licence’라는 형태로 바뀌게 된다.
};

물론 사용자가 Fancy URL을 통해 직접 접속하였을 경우, 프로그램과 서버상으로 처리를 별도로 해주어야 한다. 또한 IE9 이하의 버전에서는 동작하지 않으므로, IE9 이하의 경우 브라우저를 감지, hash를 이용하여 별도로 구현하여야 한다.