[Html5] History/State를 이용하여 뒤로가기 이벤트 체크하기

0. 들어가기 전에

 HTML5에서는 history/state라는 페이지에 대한 상태를 저장하는 기능이 있습니다. pushState나 replaceState등을 이용해서 페이지를 나누고 값을 추가해서 던져주는등 단일 페이지에서 URL을 다르게 주기 위해서 많이 사용하는 기능이지만 여기에서는 뒤로가기를 할 때 발생되는 이벤트를 제어하기 위해서 사용하는 케이스를 짤막하게 소개해 봅니다.


1.  HTML5에서의 뒤로가기 체크 이벤트 호출

<script>

 history.pushState(null, null, '');  //data, title, url 의 값이 들어가게 됩니다. 비워두면 이벤트 발생의 플래그 정도로 사용 할 수 있습니다.

                                         //기존페이지 이외에 입력한 URL로 페이지가 하나 더 만들어지는 것을 알 수 있습니다.



 window.onpopstate = function(event) {  //뒤로가기 이벤트를 캐치합니다.

  history.back();   // pushState로 인하여 페이지가 하나 더 생성되기 떄문에 한번에 뒤로가기 위해서 뒤로가기를 한번 더 해줍니다.

  console.log('뒤로가기 체크'); 

 };

</script>

특정 페이지 혹은 전 페이지에서 뒤로가기를 할 때 뒤로가기가 아니라 새로고침을 하고 싶다면 아래와 같은 식으로 사용 할 수 있습니다.

 history.pushState(null, null, '');

  window.onpopstate = function(event) {

    var prevUrl = document.referrer;

    if(prevUrl.indexOf('test.do') < 0){  //뒤로가기를 한 페이지가 test.do 페이지가 아니면 뒤로가기, test.do 페이지면 새로고침합니다.

      history.back();

    }else{

      location.href= prevUrl;

    }

 };

 

2. HTML5이외의 경우

사실상 HTML5가 100% 보장되는 환경은 그다지 많지 않습니다. 따라서 우리는 HTML5가 아닌 경우도 생각해 봐야 합니다.

검색 결과 HTML5가 아닌 환경에서도 해쉬를 이용하여 스크립트로 구현해놓은 것을 발견했습니다.
https://github.com/browserstate/history.js

browserstate/history.js

browserstate/history.js

history.js - History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all brows...

github.com

위와 비슷하게 짠다면 아래와 같이 쓸 수 있습니다.

<script type="text/javascript" src="jquery.history.js"></script>  //github에서 라이브러리 js를 받아 추가합니다.

<script>

History.pushState(null, null, '#');  //이 스크립트에서는 url을 빈칸으로 두면 이벤트가 발생하지 않습니다. 따라서 #으로 대체합니다.

 History.Adapter.bind(window,'statechange',function(){ 

     var state = History.getState(); // 상태 값을 가져옵니다.

     history.back();

 });

</script>

 

+ 2016-03-14 추가

history/state를 쓸 경우 POST에 대한 이슈가 있습니다. 

history/state를 걸어둔 페이지는 새로고침을 하게 되면 항상 GET으로 넘어가게 됩니다. POST로만 접속 가능하게 만들었을 경우 접속이 안되거나 POST로 넘겨준 데이터가 날아가는 이슈가 있을 수 있습니다.


출처: https://naly3512.tistory.com/2623 [행복의 시작]