JavaScript 브라우저 내장객체-history 객체 back() +++ 뒤로가기 버튼 제어하기
페이지 정보
본문
홈페이지를 만드는 과정에서 뒤로가기 버튼이 종종 사용됩니다.
간단하게 아래와 같이 사용하시면 뒤로가기 기능이 O.K
history 객체 .........................................................
window객체에서 파생된 것으로 window를 생략한다.
방문자가 최근에 방문한 URL을 웹브라우저가 저장해둔 히스토리정보를 이용해서 앞으로,뒤로 갈 수 있다. URL자체를 알아내지는 못한다!
어떤 일처리를 하고 나서 원래의 페이지로 보낼 때! 이용하겠죠!!!
* 새로 서버의 문서를 요청하지 않고 보관하고 있던 페이지를 보여준다는것!!!
■ history 객체 프로퍼티
length : 저장된 URL 개수
■ history 객체 메서드
back() : 히스토리 목록에서 한 단계 뒤로
forward() : 히스토리 목록에서 한 단계 앞으로
go(정수) : 히스토리 목록에서 한 단계 앞으로,뒤로(음의 정수일 경우)
back()는 go(-1) 과 같음
■ 뒤로 돌아가기
1.
<script language="javascript">
<!--
alert("암호가 다르군요");
history.back();
// history.go(-1);
//-->
</script>
2.
<a href="javascript:history.back()">뒤로</a>
3.
<a href="javascript:clickon=history.go(-1)">뒤로가기 (한글)</a>
<a href="#" onclick="javascript:history.back(1);">뒤로가기 (한글)</a>
<a href="javascript:clickon=history.go(-1)">Back (영어)</a>
<a href="javascript:clickon=history.go(-1)">前前面 (일본어)</a>
두단계 뒤로가게 하고 싶을때는 history.go(-2)
4. 사용된 페이지로의 이동할 경우 아래 방식을 사용
<form>
<input type="button" value=" 뒤로가기 " onclick="javascript:history.back(1);">
<input type="button" value=" 뒤로가기 " onclick="history.back(1);">
<input type="image" src="이미지.gif" onclick="javascript:history.back(1);">
<input type="image" src="이미지.gif" onclick="history.back(1);">
5. jQuery 활용
<script type="text/javascript">
$(document).ready(function(){
$("#jQuery_history_back").click(function(){
window.history.back();
});
});
</script>
<body>
<img src="이미지 주소" id="jQuery_history_back">
참고자료
http://blog.naver.com/doolyking?Redirect=Log&logNo=60004548671
https://pnot.tistory.com/13
간단하게 아래와 같이 사용하시면 뒤로가기 기능이 O.K
history 객체 .........................................................
window객체에서 파생된 것으로 window를 생략한다.
방문자가 최근에 방문한 URL을 웹브라우저가 저장해둔 히스토리정보를 이용해서 앞으로,뒤로 갈 수 있다. URL자체를 알아내지는 못한다!
어떤 일처리를 하고 나서 원래의 페이지로 보낼 때! 이용하겠죠!!!
* 새로 서버의 문서를 요청하지 않고 보관하고 있던 페이지를 보여준다는것!!!
■ history 객체 프로퍼티
length : 저장된 URL 개수
■ history 객체 메서드
back() : 히스토리 목록에서 한 단계 뒤로
forward() : 히스토리 목록에서 한 단계 앞으로
go(정수) : 히스토리 목록에서 한 단계 앞으로,뒤로(음의 정수일 경우)
back()는 go(-1) 과 같음
■ 뒤로 돌아가기
1.
<script language="javascript">
<!--
alert("암호가 다르군요");
history.back();
// history.go(-1);
//-->
</script>
2.
<a href="javascript:history.back()">뒤로</a>
3.
<a href="javascript:clickon=history.go(-1)">뒤로가기 (한글)</a>
<a href="#" onclick="javascript:history.back(1);">뒤로가기 (한글)</a>
<a href="javascript:clickon=history.go(-1)">Back (영어)</a>
<a href="javascript:clickon=history.go(-1)">前前面 (일본어)</a>
두단계 뒤로가게 하고 싶을때는 history.go(-2)
4. 사용된 페이지로의 이동할 경우 아래 방식을 사용
<form>
<input type="button" value=" 뒤로가기 " onclick="javascript:history.back(1);">
<input type="button" value=" 뒤로가기 " onclick="history.back(1);">
<input type="image" src="이미지.gif" onclick="javascript:history.back(1);">
<input type="image" src="이미지.gif" onclick="history.back(1);">
5. jQuery 활용
<script type="text/javascript">
$(document).ready(function(){
$("#jQuery_history_back").click(function(){
window.history.back();
});
});
</script>
<body>
<img src="이미지 주소" id="jQuery_history_back">
참고자료
https://pnot.tistory.com/13
댓글목록
등록된 댓글이 없습니다.