1. href
- 이동 페이지를 지정
$(function(){ $('#start').click(function(){ location.href = 'index.html'; }); });
2. replace
- 앞 페이지의 이력을 남기지 않을 때 사용한다
- 돌아오기 버튼으로 전 페이지도 돌아 갈 수 없다
$(function(){ $('#start').click(function(){ location.replace('closure.html'); }); });
3. pushState()
- history.pushState()
- 브라우저의 이력을 추가한다.
- Ajax 통신으로 페이지의 내용을 편집하는 경우 리퀘스트 시, 키 정보가 된다
<input type="button" id="start" value="add"/> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ var state = 1; //이력추가 $('#start').click(function(){ history.pushState('state'+state, 'State'+state); state++; }) ; //뒤로가기 누루면 그 시점 상태 로그표시 $(window).on('popstate',function(e){ console.log(e.originalEvent.state); }) ; }); </script>
- state 프로퍼티는 History API의 고유 이벤트 속성이다
- e는 jQuery의 고유 이벤트 객체이므로 그대로 state에 엑세스 할 수없다
- e.originalEvent 프로퍼티에서 원래 이벤트 객체를 구한뒤 state 엑세스
- javascript는 e.state가능