Ajax 요청 후, 다른 페이지 이동 후 뒤로가기 처리하기
Back.html
jquery-1.7.1.min.js아래 예제는 비동기 처리를 해당 화면에서 처리하게 되면, 브라우저에 내장이 되지 않아 브라우저의 뒤로가기 할 경우 방금 전의 과거 화면 상황으로 전환이 되지 않는다. 비동기로 해당화면에서 처리하고 나서 링크를 눌러 구글페이지로 이동한 다음, 브라우저의 뒤로가기 버튼을 누르면 이전 화면의 최종 화면 상황을 보는 방법을 아래와 같이 document.location.hash 를 이용하여 개발된 사항이다. 구글 페이지로 이동하고 뒤로가기 버튼을 누르면 /Back.html#2 (여기서 강제로 #을 붙이고 뒤에 파라미터값을 전달한다.) 처럼 구분자로 #을 붙이고 할당한 파라미터 값이 붙여서 해당 html 를 호출하는 식이다. 이는 통 페이지로 개발할때 가능하며, frameset 으로 여러 화면을 구성햇을 때는 어려움이 있을거라 생각이 든다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var i = 0;
$(document).ready(function() {
var currentPage = 1;
//var hashCheckInterval = setInterval("CheckForHash()", 500);
checkForHash();
$('#btn1').add('#btn2').add('#btn3').bind('click', function(e) {
currentPage = $(this).val();
showPage($(this).val());
});
$('#link').bind('click', function(e) {
document.location.hash = "#" + currentPage;
});
});
function checkForHash() {
if(document.location.hash){
var HashLocationName = document.location.hash;
HashLocationName = HashLocationName.replace("#","");
$("#display").html(HashLocationName)
} else {
$("#display").html($('#btn1').val())
}
}
function showPage(value) {
$("#display").html(value)
}
</script>
</head>
<body>
<div id="display"></div>
<input type="button" value="1" id="btn1">
<input type="button" value="2" id="btn2">
<input type="button" value="3" id="btn3">
<br/>
<a href="http://www.google.com" id="link">Google :)</a>
</body>
</html>
'프로그래밍 > jQuery 👍' 카테고리의 다른 글
| A jQuery Tokenizing Autocomplete Text Entry (0) | 2013.08.30 |
|---|---|
| c# 과 JS 의 OOP 비교해 보기 (0) | 2013.05.11 |
| 꺾은선 그래프 무료 (0) | 2012.10.29 |
| jQuery 의 outerHTML() 플러그인 (0) | 2012.07.25 |
| jQuery Twitter Search Plugin (0) | 2012.07.04 |