질문/조언팁/리소스 공유

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

 

맵을 막 이동해보면 주소가 변경되는 것을 알 수 있다. (좌표값과 줌값이 추가됨)

 

 

 

 

 

글쓴이 하늘희

profile
てててててて
  • profile

    XE 페이지라면 간단히 current_url.setQuery('page',page); 이렇게 해주시면 현재 주소에서 page값만 바뀐 주소가 반환됩니다.
    반대로 current_url.setQuery('page',''); 이렇게 비워주면 현재 주소에서 page값만 빠진 주소가 반환되고요.

     

    중첩해서 current_url.setQuery('page',page).setQuery('mid','index'),setQuery('document_srl',''); 이렇게도 가능합니다:)

  • profile profile

    오옷 그렇군요! 유용한 정보네요!! +_+

     

    그럼 위와 같이 하면 굳이 pushState()를 안써도 되는 건가욧?!

  • profile profile
    좋은정보네요! pushState쓰다가 문제생긴게 한두번이 아닌데 이런게 있는줄은 몰랐네요..
  • profile profile

    아뇨. 주소 반환만 해주는거라 pushState는 해주셔야 합니다. 다만 위 코드에서 page를 찾아 지워줄 필요성은 없어집니다.

     

    대략

    if(typeof(history.pushState) == 'function')
    {
        //현재 주소를 가져온다.
        var renewURL = location.href;
         
        //페이지 갱신 실행!
        history.pushState(null, null, renewURL.setQuery('page',page));
    }

     

    이렇게 가능해진다는 것이죠.

  • profile profile
    아아, pushState를 대체하는 게 아니라 page 지우는 부분 대신에 setQuery를 쓰는 거군요!
    좋은 정보 감사합니다 :)
  • profile profile
    아 그러고보니 코어에서 본 것 같네요..ㅋㅋ!!

서버에 요청 중입니다. 잠시만 기다려 주십시오...