심재운 블로그

728x90
반응형


Back.html


jquery-1.7.1.min.js


NoBack.html


아래 예제는 비동기 처리를 해당 화면에서 처리하게 되면, 브라우저에 내장이 되지 않아 브라우저의 뒤로가기 할 경우 방금 전의 과거 화면 상황으로 전환이 되지 않는다. 비동기로 해당화면에서 처리하고 나서 링크를 눌러 구글페이지로 이동한 다음, 브라우저의 뒤로가기 버튼을 누르면 이전 화면의 최종 화면 상황을 보는 방법을 아래와 같이 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">&nbsp;

<input type="button" value="2" id="btn2">&nbsp;

<input type="button" value="3" id="btn3">&nbsp;

<br/>

<a href="http://www.google.com" id="link">Google :)</a>

</body>

</html>









728x90
반응형

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드