[HTML5]History API 활용
페이지 정보
본문
참고 : http://naver.yojm.net/150146744487
웹브라우저를 사용해서 뉴스를 보거나 인터네쇼핑을 하다가
뒤로가기나 앞으로가기 등을 사용해보신적이 있을겁니다.
당연히 뒤로 가기를 하면 이전에 열려있던 페이지가 열릴텐데요.
이런 웹페이지 방문 기록을 보고 History라고 하고
HTML5에선 History를 관리하는 API를 몇가지 제공합니다.
그래서 히스토리 네비게이션 api를 찾아봣는데요
참고 : http://html5.clearboth.org/history.html#history-0
Window.history.length
세션 히스토리 항목의 크기를 반환합니다.
지금까지 3군데 웹페이지를 다녀왔으면 3이 되겠죠.
Window.history.go([숫자])
숫자 항목에 쓰인 숫자만큼 히스토리를 이동합니다.
0이 쓰이면 현재페이지를 다시 부릅니다.(새로고침)
범위가 넘어가면 입력은 무시됩니다.
Window.history.back()
히스토리에서 한단계 뒤로 갑니다. 즉 이전 페이지로 갑니다.
Window.history.forward()
히스토리에서 한단계 앞으로갑니다.
Window.history.pushState(data, title[, url])
Title로 data를 세션 히스토리에 씁니다. URL이 있다면 함께 적용됩니다.
Window.history.replaceState(data, title[, url])
Title과 data로 세션 히스토리의 현재 항목을 갱신합니다. URL이 있으면 함께 적용됩니다.
Window.onpopstate(event)
세션 히스토리 항목으로 이동할 때 popstate 이벤트가 발생되면 연결된 함수를 호출합니다.
[출처] [HTML5]History API 활용|작성자 CleanBright
웹브라우저를 사용해서 뉴스를 보거나 인터네쇼핑을 하다가
뒤로가기나 앞으로가기 등을 사용해보신적이 있을겁니다.
당연히 뒤로 가기를 하면 이전에 열려있던 페이지가 열릴텐데요.
이런 웹페이지 방문 기록을 보고 History라고 하고
HTML5에선 History를 관리하는 API를 몇가지 제공합니다.
그래서 히스토리 네비게이션 api를 찾아봣는데요
참고 : http://html5.clearboth.org/history.html#history-0
Window.history.length
세션 히스토리 항목의 크기를 반환합니다.
지금까지 3군데 웹페이지를 다녀왔으면 3이 되겠죠.
Window.history.go([숫자])
숫자 항목에 쓰인 숫자만큼 히스토리를 이동합니다.
0이 쓰이면 현재페이지를 다시 부릅니다.(새로고침)
범위가 넘어가면 입력은 무시됩니다.
Window.history.back()
히스토리에서 한단계 뒤로 갑니다. 즉 이전 페이지로 갑니다.
Window.history.forward()
히스토리에서 한단계 앞으로갑니다.
Window.history.pushState(data, title[, url])
Title로 data를 세션 히스토리에 씁니다. URL이 있다면 함께 적용됩니다.
Window.history.replaceState(data, title[, url])
Title과 data로 세션 히스토리의 현재 항목을 갱신합니다. URL이 있으면 함께 적용됩니다.
Window.onpopstate(event)
세션 히스토리 항목으로 이동할 때 popstate 이벤트가 발생되면 연결된 함수를 호출합니다.
[출처] [HTML5]History API 활용|작성자 CleanBright
- 이전글기존 요소에 새로운 요소를 추가 하거나 요소를 이동 하고 싶을때 21.02.09
- 다음글페이지에서 사용된 문자열 인코딩 체크하기 확인하기 21.02.09
댓글목록
등록된 댓글이 없습니다.