자바스크립트로 뒤로 가기, 앞으로 가기 구현
브라우저의 페이지 이동을 자바스크립트로 제어할 수 있습니다. 이를 위해 window - history 객체의 back, forward, go 메서드를 사용합니다.
예시
5개의 페이지가 있습니다. 모든 페이지의 구조는 동일합니다.
one.html
<!DOCTYPE html>
<html>
<body>
<h1>One</h1>
<a href="one.html">go one</a>
<a href="two.html">go two</a>
<a href="three.html">go three</a>
<a href="four.html">go four</a>
<a href="five.html">go five</a>
</body>
</html>
1. back
이전 페이지로 돌아갑니다.
history.back();
각 페이지에 누르면 이전 페이지로 돌아가는 <button>을 만들어보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>One</h1>
<a href="one.html">go one</a>
<a href="two.html">go two</a>
<a href="three.html">go three</a>
<a href="four.html">go four</a>
<a href="five.html">go five</a>
<div>
<button onclick="history.back()">Back</button>
</div>
</body>
</html>
버튼을 클릭하면 history object의 back() 메서드를 실행하도록 구현했습니다.
브라우저의 뒤로 가기와 동일하게 동작합니다.
2. forward
history.forward();이전 페이지로 돌아온 경우 다시 다음 페이지로 되돌아갑니다.
<div>
<button onclick="history.back()">Back</button>
<button onclick="history.forward()">Forward</button>
</div>
마찬가지로 브라우저의 앞으로 가기와 동일하게 동작합니다.
3. go
여러 페이지를 한 번에 이동할 때 사용합니다.
history.go([delta]);delta로 위치값을 전달합니다. 음수값은 뒤로, 양수값은 앞으로 갑니다. 인자로 -1과 1을 주면 각각 history.back, history.forward와 동일합니다.
제일 마지막 페이지인 five.html에서 누르면 one.html로 한 번에 돌아오는 <button>을 만들어보겠습니다. delta 값을 -4로 주면 뒤로 가기를 4번 한 것과 동일하게 동작합니다.
five.html
<!DOCTYPE html>
<html>
<body>
<h1>Five</h1>
<a href="one.html">go one</a>
<a href="two.html">go two</a>
<a href="three.html">go three</a>
<a href="four.html">go four</a>
<a href="five.html">go five</a>
<div>
<button onclick="history.back()">Back</button>
<button onclick="history.forward()">Forward</button>
<button onclick="history.go(-4)">Go -4 (go to one)</button>
</div>
</body>
</html>
History - Web API | MDN
History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다.
developer.mozilla.org
'프론트엔드 HTML CSS JAVASCRIPT' 카테고리의 다른 글
| [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (2) - 미사일 (0) | 2019.10.29 |
|---|---|
| [HTML, JAVASCRIPT] 웹 게임 만들기 포트리스 (1) - 탱크, 표적 (0) | 2019.10.28 |
| [HTML, CSS] input, textarea의 placeholder에 스타일 작업하는 방법(색상 등) (0) | 2019.08.23 |
| [HTML, CSS] 아이콘 추가하는 방법 - fontawesome 사용법 (0) | 2019.08.22 |
| [HTML, CSS] 스크롤바 스타일(디자인)하는 방법 - webkit-scrollbar (11) | 2019.08.20 |
