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가능
외부 파일 드래그 드롭 구현
입력폼에 입력되는 값의 유효성 체크하기 두번째