location.href 시 history.length 변경 없는 이슈, history.pushState 뒤로가기 이슈

728x90

location.href = '이동할 URL';

javascript 에서 location.href를 하게 되면 명시한 URL로 이동을 하고 history.length가 1 증가하게 된다.

location.href를 사용하였는데 history.length가 변경이 없는 경우가 있는데 사용자의 action을 통해서 호출되는게 아닌 경우에는 history.length가 변경이 되지 않는다.

controller

@RequestMapping(value = "/history", method = RequestMethod.GET)
public String history() throws Exception {
    return "history.html";
}

@RequestMapping(value = "/history2", method = RequestMethod.GET)
public String history2() throws Exception {
    return "history2.html";
}
@RequestMapping(value = "/history3", method = RequestMethod.GET)
public String history3() throws Exception {
    return "history3.html";
}

history.html

<body>
<a href="/history2">location.href 이동</a>
</body>
<script>
  alert(history.length);
</script>

history2.html

<body>
</body>
<script>
  alert(history.length);
  location.href = "/history3";
</script>

history3.html

<body>
</body>
<script>
  alert(history.length);
</script>

각 html에서 history.length 값을 노출하고 history.html -> history2.html 이동시에는 사용자가 a 태그를 클릭할때 이동을 하고 history2.html -> history.3.html은 사용자의 action이 없이 이동을 하게 된다.

이번엔 history3.html 페이지의 length 가 증가하게끔 history.pushState를 사용한다.

history.pushState를 사용하면 브라우저 세션 히스토리 스택에 entry를 하나 추가할 수 있다.

history2.html, history3.html 파일을 아래와 같이 변경한다.

history2.html

<body>
</body>
<script>
  alert(history.length);
  history.pushState(null, "");
  location.href = "/history3";
</script>

history3.html

<body>
<button onclick="history.back();">back</button>
</body>
<script>
    alert(history.length);
</script>

history.pushState를 통해 history를 변경시켰다면 브라우저 뒤로가기 버튼을 클릭 할때와 history.back 함수를 호출했을때 뒤로가는 동작이 달라지게 된다.

history3.html 페이지에서 브라우저 뒤로가기를 클릭 시 history 페이지로 이동(history.pushState 로 쌓은 history 무시)하게 되고 back버튼(history.back() 호출)을 클릭하면 history2 페이지로 이동(history.pushState로 쌓은 history로)하게 된다.