11주차 - jsp&js (23) window.history.forward() / window.history.back()
2022. 9. 19. 21:17ㆍjsp/java script
이번의 목표
01. window.history.forward() 에 대해 알아보자.
02. window.history.back() 에 대해 알아보자.
웹 브라우저에는 '뒤로가기'와 '앞으로 가기' 기능이 있습니다.
이들은 각각 이전 페이지로 돌아가는 기능과 다시 앞페이지로 돌아가는 기능을 하고 있습니다.
이 기능을 그대로 가지고 있는 것이 window.history.forward()와 window.history.back()입니다.
다른 페이지로 이동한 내역이 없다면 페이지 기록이 없기 때문에 위의 두 기능 또한 작동하지 않습니다.
그렇기 때문에 최소한 다른 페이지로의 이동이 한번은 일어나야지만 사용이 가능합니다.
01. 첫번째 페이지 코드
02. 두번째 페이지 코드
03. 실행 화면
01. 첫번째 페이지 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex23-1</title>
<script type="text/javascript">
// 브라우저 좌측 상단의 앞으로 가기와 같은 기능을 합니다.
function forward() {
window.history.forward();
}
</script>
</head>
<body>
<h1>23-1페이지</h1>
<a href="ex23-2.jsp">23-2 페이지</a>
<br><br>
<input type="button" value="다음 페이지" onclick="forward()">
</body>
</html>02. 두번째 페이지 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex23-2</title>
<script type="text/javascript">
// 브라우저 좌측 상단의 뒤로 가기와 같은 기능을 합니다.
function back() {
window.history.back();
}
</script>
</head>
<body>
<h1>23-2페이지</h1>
<a href="ex23-1.jsp"> 23-1 페이지</a>
<br><br>
<input type="button" value="이전 페이지" onclick="back()">
</body>
</html>03. 실행 화면
① 첫번째에서는 페이지 기록이 없기 때문에 웹 브라우저의 앞으로가기 뒤로가기 기능도 사용할 수 없고 이상태에서는 버튼을 눌러도 작동하지 않는 것을 확인할 수 있습니다.
② 23-2페이지를 눌러서 페이지 기록을 남겨놓은 상태입니다.
③ 이전 페이지 버튼을 누르면 웹 브라우저의 뒤로가기와 때문에 뒤로가기 버튼이 비활성화 된것을 확인할 수 있습니다.
④ 다음 페이지 버튼을 누르면 웹 브라우저의 앞으로 가기 기능과 같기 때문에 앞으로 가기 버튼이 비활성화 되는 것을 확인할 수 있습니다.
'jsp > java script' 카테고리의 다른 글
| 11주차 - jsp&js (25) window.open() (1) | 2022.09.21 |
|---|---|
| 11주차 - jsp&js (24) confirm() (2) | 2022.09.21 |
| 11주차 - jsp&js (22) onmouseup/onmousedown 으로 이미지를 바꿔보자 (0) | 2022.09.19 |
| 11주차 - jsp&js (21) onmousedown/onmouseup 으로 값을 바꿔보자 (0) | 2022.09.19 |
| 11주차 - jsp&js (20) <div>와 <span>에 onmouseover/onmouseout 사용해보자. (0) | 2022.09.19 |