페이지 히스토리 조절하기 (history.pushState)

2017. 8. 11. 18:51

동적태그를 이용하여 게시판 목록과 상세화면을 구현한다고 가정하면 브라우저 앞으로가기 뒤로가기를 이용하여 게시글 목록과 내용으로 이동할수 없을것이다.

이것을 가능하게 끔 하는게 history.pushState 함수이다.

history.pushState(state, title, url) 형식으로 state에는 전달하고 싶은 object를 title은 브라우저의 타이틀 url은 해당히스토리를 브라우저에 표시할 url명을 각각 입력하면된다.

히스토리를 수정하고 싶을때는 history.replaceState(state, title, url) 함수를 이용한다.

사용예제

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script>

function setfirst() {
	$("#list").html("");
	$("#list").append("<a href='javascript:pageMove(1);'>첫번째</a></br>"
	+"<a href='javascript:pageMove(2);'>두번째</a></br></br>"
	+"<a href='javascript:setfirst()'>1</a><a href='javascript:setsecond()'>2</a>")
	
	var listData = "<a href='javascript:pageMove(1);'>첫번째</a></br>"
		+"<a href='javascript:pageMove(2);'>두번째</a></br></br>"
		+"<a href='javascript:setfirst()'>1</a><a href='javascript:setsecond()'>2</a>";
	
       history.pushState({flag: 'list', listData : listData}, null, "/list1");
	
}

history.pushState({flag: 'content', contentData: contentData}, null, "/content?page="+page);

}

//활성화된 히스토리 엔트리가 변경될 때 발생
window.onpopstate = function(event) {
  if(event.state.flag=='list') {
      var data = event.state.listData;
      $("#list").html("");
      $("#list").append(data);
  } else {
      var data = event.state.contentData;
      $("#list").html("");
      $("#list").append(data);
  }
};

</script>
</head>

</div>

저작자표시 비영리 변경금지

'JAVA Script' 카테고리의 다른 글

월의 마지막일 구하기 (0)	2017.09.07
3자리마다 콤마 추가하기 (0)	2017.09.01
배열에서 중복된 문자열 가져오기 (0)	2017.08.10
패스워드 유효성 검사 (0)	2017.07.21
이벤트 종류 (0)	2017.07.21

IT

페이지 히스토리 조절하기 (history.pushState)

'JAVA Script' 카테고리의 다른 글

+ Recent posts

티스토리툴바