Javascript - History API

[Javascrip] History API

History API란?

• HTML5부터 도입한 API로, 웹브라우저가 관리하는 세션히스토리(Session History)의 주소탐색 내역을 제어하기 위한 웹표준 API입니다.
• Javascript에서 History API는 기본적으로 history 전역객체를 통해서 제어할 수 있으며, window, document 전역객체를 통해서 접근할 수 있습니다.

1. 브라우저 History 페이지 이동

// 뒤로가기
window.history.back();
// 앞으로 가기
window.history.forward();
// 특정 위치 및 새로고침
window.history.go();
window.history.go(0);	// 인자값이 없거나, 0이면 페이지 새로고침
window.history.go(-1);	// history.back()과 동일하게 한페이지 뒤로 이동
window.history.go(-2);	// 두페이지 뒤로 이동
window.history.go(1);	// history.forward()와 동일하게 한페이지 앞으로 이동
window.history.go(2);	// 두페이지 앞으로 이동

2. History 객체의 프로퍼티

// 현재 페이지를 포함한 방문기록의 총페이지수를 나타냅니다.
history.length	

// 방문기록 조회시 스크롤 위치를 원래 위치로 복원할지 여부를 나타냅니다.
// auto(기본값) 또는 manual을 지정할수 있습니다.
history.scrollRestoration

// 히스토리 스택의 최상단에 위치한 상태값을 나타냅니다.
// Popstate 이벤트에 반응할 핑요 없이 현재 방문기록의 상태값을 확인할수 있습니다.
history.state

3. 브라우저 History 추가 및 변경

- History API는 브라우저의 현재 URL 조작할 수 있도록 pushState()와 replaceState() 메서드를 제공합니다.

- pushState()와 replaceState() 메서드는 주소표시줄의 URL만 갱신되며, 해당 페이지를 새로 불러오지는 않습니다.

pushState() 및 replaceState() 사용법

해당 메소드는 3개의 인자를 받으며, 첫 번째 인자는 URL에 연관된 상태객체이며, 두 번째 인자는 하위 호환성을 위해서 

사용하는 인자이나 현재는 대부분의 브라우저가 무시하는 인자값이라 빈문자열 넘기면 되며, 

세 번째 인자는 URL 정보로 절대경로 및 상대경로 모두 사용이 가능합니다.

단 보안산의 이유로 프로토콜, 호스트네임, 포트가 다른 출처(origin)의 URL은 사용할 수 없습니다.

history.pushState(stateObj, '', url);
// 세션히스토리에 이전 URL을 추가하여 브라우저 뒤로가기 버튼이 활성화 됩니다.
// 원래페이지는 이전페이지가 되며, 인자로 넘긴 URL이 현재 페이지가 됩니다.

history.replaceState(stateObj, title, url);
// 세션히스토리의 상태나 URL을 업데이트 합니다.
// stateObj는 Javascript 객체이며 Null값을 허용합니다.

 

 

※ replaceState() 메서드를 이용하여 주소창의 URL 변경예

var trident = navigator.userAgent.match(/Trident\/(\d.\d)/i);
var params = "test=123&test2=456";

if(trident && trident[1] == "7.0")	// ie 9
   window.location.pathname + "?" + params;
else
   history.replaceState(null, null, "?" + params);

4. popState 이벤트

- 현재 활성화되는 기록항목이 바뀔 때마다 발생하는 이벤트입니다.