개발/JavaScript

주소창의 url 변경 방법

haloper 2016. 4. 11. 15:30

Ajax를 이용해서 개발을 하다 보면,

사용자가 실제로 url 이동을 하지 않은 상태에서

주소창의 url을 변경해야 할 경우가 있습니다.


html5에 적용된 기술로 

아래와 같은 코드로 페이지 이동 없이 주소창 변경이 가능합니다.



function changeUrl(title, url, state) {
    if (typeof (history.pushState) != "undefined") { //브라우저가 지원하는 경우
        history.pushState(state, title, url);
    }
    else {
        location.href = url; //브라우저가 지원하지 않는 경우 페이지 이동처리
    }
}


pushState에 넘겨주는 state는 해당 히스토리에 저장하는 object로

history.state; 코드를 통해 읽어와 사용할 수 있습니다.

참고로 이 기능은 IE10 이상부터 사용 가능합니다.