[jQuery] 페이지이동 제어 - href, replace, pushState()

페이지 이동 제어 - href, replace, pushState()

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가능