DOM의 window객체는 history객체를 통해 브라우저 히스토리에 접근할 수 있다.
window.history속성은 History객체에 대한 참조이며 윈도우의 열람 이력을 최근에 방문한 URL의 배열로 반환한다.
- window.history.forward(): 방문 기록의 앞으로 이동(브라우저 도구 모음의 앞으로 가기 버튼을 누른 것과 동일)
- window.history.back(): 방문 기록의 뒤로 이동(브라우저 도구 모음의 뒤로 가기 버튼을 누른 것과 동일)
ex24-1.jsp
<html>
<head>
<meta charset="UTF-8">
<title>ex24-1</title>
<script>
function forward() {
window.history.forward();
}
</script>
</head>
<body>
<h1>24-1 페이지</h1>
<a href="ex24-2.jsp">ex24-2 페이지로 이동</a><br><br>
<input type="button" value="다음 페이지" onclick="forward()">
</body>
</html>
ex24-2.jsp
<html>
<head>
<meta charset="UTF-8">
<title>ex24-2</title>
<script>
function back() {
window.history.back();
}
</script>
</head>
<body>
<h1>24-2 페이지</h1>
<a href="ex24-1.jsp">ex24-1 페이지로 이동</a><br><br>
<input type="button" value="이전 페이지" onclick="back()">
</body>
</html>
다음 페이지 버튼을 클릭하면 onclick 속성에 의해 forward()가 호출된다.
window.history.forward()로 브라우저 방문 기록의 앞으로 이동한다.
이때, 앞선 방문 기록이 존재하지 않는다면 페이지를 이동하지 않는다.
이 경우에는 ex24-2.jsp 파일을 서버에 요청하고 싶을 때 a태그를 클릭해야 한다.
a태그를 통해 24-2페이지로 이동하였다.
이전 페이지 버튼을 클릭하면 back()이 호출된다.
이전 방문이 24-1 페이지이므로, window.history.back()가 수행되면 24-1페이지로 이동한다.
물론 24-1 페이지로 이동시키는 a태그를 클릭해도 이전 페이지로 이동한다.
다시 24-1페이지로 돌아왔다. 이때 다음 페이지 버튼을 클릭하면 이전과 달리 앞선 방문 기록이 존재하기 때문에(24-2 페이지) 버튼을 클릭하거나 a태그를 클릭해도 24-2 페이지로 이동할 수 있다.
출처: https://developer.mozilla.org/ko/docs/Web/API/History_API
History API - Web API | MDN
DOM의 Window 객체는 history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공합니다. history는 사용자를 자신의 방문 기록 앞과 뒤로 보내고 기록 스택의 콘텐츠도 조작할 수 있는,
developer.mozilla.org
'Front-end' 카테고리의 다른 글
| [js] 자바 스크립트: Date 관련 함수, setInterval, clearInterval (0) | 2022.05.02 |
|---|---|
| [js] 자바 스크립트: alert, confirm, window.open(), window.close() (0) | 2022.05.02 |
| [js]자바 스크립트: 이벤트(Event) (0) | 2022.05.02 |
| [js]자바 스크립트: 연산자, 조건문, 반복문, 함수, 익명(무명) 함수, 오버로딩, onClick() (0) | 2022.04.29 |
| [css]position - static, relative, absolute, fixed (0) | 2022.04.28 |
