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로)하게 된다.
● 참고자료
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event
https://stackoverflow.com/questions/44553005/how-to-browser-back-when-using-pushstate
'개발 > Web' 카테고리의 다른 글
| PHP + MariaDB + Intellij 개발환경설정 (0) | 2025.01.17 |
|---|---|
| [Three.js] POINT CLOUD 3D 이미지 웹페이지 노출 (1) | 2024.07.17 |
| Blob 데이터를 이미지로 보여주는 방법 (0) | 2024.06.18 |