'javascript history object'에 해당되는 글 1건

자바스크립트(javascript)를 이용하면 현재 화면에서 뒤로가기, 앞으로가기, 앞뒤 원하는 칸만큼 이동하기, 화면 리로드 하기 등등의 기능을 사용할 수 있습니다. 

이를 가능하게 하는 것이 바로 javascript 의 History Object 입니다. 

History Object 는 웹 브라우저 상에서 사용자가 방문한 URL 정보를 가지고 있습니다. 

History Object 는 Window Object의 한 부분으로 window.history 속성을 통해 접근 가능합니다. 여기서 window. 은 생략되어도 무관합니다. 

■ 뒤로가기 

<a href="javascript:history.back();">뒤로가기</a>

window.history.back(); 함수 사용

위와 같이 a tag 의 href 속성에 바로 history.back() 호출 하는 방법도 있지만 아래와 같이 다른 방법들을 사용 할 수 있습니다. 

<script type="text/javascript">

   function goBack(){
      window.history.back();
   }

</script>

<input type="button" value="뒤로가기" onclick="goBack();" />
<a href="goBack();">뒤로가기</a>
<a href="#" onclick="goBack();">뒤로가기</a>

goBack() 이라는 스크립트 함수를 만들고 여기에 window.history.back(); 또는 history.back(); 을 선언하여 원하는 history back 이벤트를 발생 시킬수 있습니다. 

input tag 및 a tag 두가지 모두 동일 동작을 하게 됩니다. 

■ 앞으로가기 

<a href="javascript:history.forward();">앞으로 가기</a>

window.history.forward(); 함수 사용

뒤로 가기와 마찬가지로 앞으로 가기도 여러가지 방식으로 처리 가능합니다. 

<script type="text/javascript">

   function goForward(){
      window.history.forward();
   }

</script>

<input type="button" value="앞으로 가기" onclick="goForward();" />
<a href="goForward();">앞으로 가기</a>
<a href="#" onclick="goForward();">앞으로 가기</a>

■ 원하는 페이지 수만큼 이동하기

<script type="text/javascript">

   function goForward(){
      window.history.go(2);
   }
   function goBack(){
       window.history.go(-3);
   }

</script>

<button onclick="goForward()">두페이지 앞으로이동</button>
<button onclick="goBack()">두페이지 뒤로이동</button>

window.history.go(); 함수 사용

go() 함수에 인자값을 추가 하여 이동하고자 하는 방향 및 페이지 수를 결정 할 수 있습니다. 

go(1) 과 같이 1 이상의 number 값을 입력 시 앞으로 이동하게 되고 

go(-1) 과 같이 -1 이하의 number 값을 입력 시 뒤로 이동하게 됩니다. 

number 대신에 URL string 을 입력하여 해당 URL로 이동하는데 사용하기도 합니다. 다만, 모든 브라우저를 지원 하는 것이 아니므로 원하는 페이지로의 이동을 하시려면 

window.location.href='jamesdreaming.tistory.com';

위와 같이 window.location.href 를 사용하시는게 좋습니다. 

■ 리로드

<a href="javascript:location.reload();">리로드</a>

window.location.reload(); 함수 사용

■ History stack count

var numberOfHistoryEntries = window.history.length;

window.history.length 를 사용하여 history stack 에 쌓여 있는 URL 정보 갯수를 가져 올 수 있습니다.