History.pushState()
서두
이것을 어디에 올려야 할 지 참으로 고민이 많았습니다..
실제 소스 공유도 아니고.. 어떻게 보면 html5 함수 설명인데.. 아무튼 그나마 여기가 적합한 듯 하여 작성합니다.
@CONORY 님 괜찮은 곳이나 적합한 카테고리로 옮겨주시면 감사하겠습니다. (저는 애매하네요~)
History.pushState()란?
페이지를 리로드하지 않고 페이지 주소만 변경할 때 사용합니다.
브라우저가 HTML5를 지원해야 사용 가능합니다. (IE는 10이상)
이 내용은
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
여기에 자세히 서술되어 있습니다.
기본 문법
history.pushState(state, title, url);
예제
var state = { 'page_id': 1, 'user_id': 5 }; var title = 'Hello World'; var url = 'hello-world.html'; history.pushState(state, title, url);
예제 분석
state = 세션 히스토리에 넣을 데이터, object형식, 사용하지 않거나 마땅히 넣을 게 없으면 null로 해도 된다.
// state에 잘 아시는 분은.. 설명해주면 고맙겠습니다...(ㅇ_ㅇ);;;
title = 변경할 브라우저 제목 (변경하지 않을 거면 null 로 입력하자)
url = 변경할 브라우저 URL
그럼 위와 같이 적용 후 실행하면
hello-world.html 라는 문서가 없어도 주소는 hello-world.html로 변경되어 있을 것이다!
실제 페이지를 로드하는 것은 아니기 때문에 실제 문서 존재 여부는 중요하지 않다.
물론 새로고침 하면 페이지를 찾을 수 없다고 에러가 뿜뿜!
뒤로가기를 하면 원래 문서가 뜰 것입니다.(예제페이지)
예제 활용
이것을 응용하면
ajax로 인한 무한 페이지 로드시 뒤에 page=페이지 번호를 할당하여
새로고침하더라도 현재 리스트를 이탈하지 않을 수 있습니다.
예를 들자면..
ajax가 성공후 뿌려주는 부분 다음에
//현재 주소를 가져온다. var renewURL = location.href; //현재 주소 중 page 부분이 있다면 날려버린다. renewURL = renewURL.replace(/\&page=([0-9]+)/ig,''); //새로 부여될 페이지 번호를 할당한다. // page는 ajax에서 넘기는 page 번호를 변수로 할당해주거나 할당된 변수로 변경 renewURL += '&page='+page; //페이지 갱신 실행! history.pushState(null, null, url);
이렇게 하면
ajax 실행 후 현재 게시물 주소에 자동으로 현재 페이지 번호가 매치되서 뜨게 될 것이다..!
예를 들어 https://xetown.com/index.php?mid=alley&page=1 을 보고 있었는데
자동 페이지로드가 구현되어 있고 2번 페이지를 호출하는 순간
현재 보고 있는 주소는 신기하게도
https://xetown.com/index.php?mid=alley&page=2 로 변경된다.
하지만 앞서 말했듯이 html5 지원 브라우저에서만 사용 가능하기 때문에, 지원하지 않거나 ie10 미만 버전에서는
열심히 에러를 뿜어줄 것이다.
따라서 그런 경우를 대비해 pushState가 지원되지 않는다면 사용하지 않도록 설정하자
if(typeof(history.pushState) == 'function') { //현재 주소를 가져온다. var renewURL = location.href; //현재 주소 중 page 부분이 있다면 날려버린다. renewURL = renewURL.replace(/\&page=([0-9]+)/ig,''); //새로 부여될 페이지 번호를 할당한다. // page는 ajax에서 넘기는 page 번호를 변수로 할당해주거나 할당된 변수로 변경 renewURL += '&page='+page; //페이지 갱신 실행! history.pushState(null, null, url); }
간단한 if문을 걸어서 지원여부를 체크한다.
만약 IE하위 버전 지원을 하려면.. #(해시태그)를 활용하자. 가장 간단히 활용할 수 있는 것..!
참고로 해시태그의 변경은 location.hash = '변경 해시태그명'; 이다.
해시태그를 이용하여 페이지 번호를 넘겨주고 해시태그에 페이지 번호가 있다면 해당 페이지로 리다이렉트 시키거나... ajax로 호출하자.
주로 사용되는 곳 (대표적 예제 사이트?)
구글지도 https://map.google.com
맵을 막 이동해보면 주소가 변경되는 것을 알 수 있다. (좌표값과 줌값이 추가됨)
XE 페이지라면 간단히 current_url.setQuery('page',page); 이렇게 해주시면 현재 주소에서 page값만 바뀐 주소가 반환됩니다.
반대로 current_url.setQuery('page',''); 이렇게 비워주면 현재 주소에서 page값만 빠진 주소가 반환되고요.
중첩해서 current_url.setQuery('page',page).setQuery('mid','index'),setQuery('document_srl',''); 이렇게도 가능합니다:)