[JavaScript] history.pushState() - 페이지 갱신없이 주소URL 변경하기

스크립트로 페이지를 갱신하지 않고 페이지 주소만 변경하는 방법에 대해 알아보자.

생각외로 url을 이동하지 않은 상태에서 주소창의 url만 변경해야 하는 경우가 생길 수 있다.

 

▷ 구문

history.pushState(state, title[, url]);

state : 세션 히스토리에 넣을 상태 객체 (잘 모르겠으니 null을 넣어주자.)

title : 브라우저의 제목 (필요 없을 시 null 사용)

url : 변경할 브라우저 URL 

---

예제를 통해 접근해보자.

 

▷ 예제1) history.pushState()

history.pushState(null, null, 'record')

 

▷ 결과 

실행 전

실행 후

---

세번째 매개변수에 넣어준 url로 변경된 것을 확인할 수 있다.

사용하기에 앞서 알아둬야할 것은 HTML5에서 적용된 기술로 IE 10 이상에서만 사용가능하다.

 

어떤 브라우저를 사용하는지 알 수 없다면 history.pushState가 사용가능한지만 체크해주면 된다.

 

▷ 예제2) history.pushState 사용 가능 브라우저 체크

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