[Javascript] window.history

안녕하세요. 명월입니다.

이 글은 Javasciprt에서 window.history에 대한 글입니다.

Window.history는 현재 열고 있는 페이지의 이동 상태를 확인할 수 있고 이동 및 조작도 가능한 함수입니다.

이전 페이지로 이동

window.history.back();

위 소스는 브라우져 상에서 뒤로가기와 동일하게 움직입니다.

다음 페이지로 이동

window.history.forward();

위 소스는 브라우져 상에서 앞으로가기와 동일하게 움직입니다. 그러나 forward의 경우는 뒤로가기를 누른적이 없는, 즉 앞으로 가기에 대한 정보가 없을 때는 동작하지 않습니다.

해당 페이지로 이동

window.history.go(index 번호);

back, forward는 한단계씩 이동할 수 있으면 go의 경우는 한 번에 몇 단계를 점프할 수 있습니다.

즉, go(-1)는 back과 같고 go(1)은 forward와 같습니다. go(-2)는 전전의 페이지로 이동하는 것입니다.

history 조작(?)하기

history 내용을 조작하는 방법에는 pushState와 replaceState가 있습니다.

replaceState의 경우는 현재 주소 창을 바꾸는 것이고 pushState는 history를 추가하는 것입니다.

request가 필요없이 url 주소를 변경을 해야 할 때가 있습니다. 가령 onPage 사이트라고 하면(AngularJS)같이 page request없이 페이지 전환이 일어나는 페이지가 있습니다.

그러나 다른 사람에게 url를 공유하기 위해서는 url를 주소창에 남길 필요성이 있습니다.

window.history.replaceState(status,title,"url");
window.history.pushState와(status,title,"url");

<button class="pushstate">pushState</button>
<button class="replacestate">replaceState</button>
<script>
$('.pushstate').on('click', function(){
  window.history.pushState("test",null,"./");
});
$('.replacestate').on('click', function(){
  window.history.replaceState("test",null,"./569");
});
</script>

예제

참고로 history오브젝트의 함수는 아니지만 이전 페이지의 url를 정보를 취득하는 방법은 document.referrer로 얻을 수 있습니다.

<div class="referrer"></div>
<script>
var prevPage = document.referrer;
if($.trim(prevPage) === ""){
  $(".referrer").html("당신은 이 페이지를 직접 입력으로 들어오셨습니다.");
} else {
  $(".referrer").html("당신은 " + prevPage + "를 통해 들어오셨습니다.");
}

예제

여기까지 JJavasciprt에서 window.history에 관한 글이였습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.