IE 는 역시(?) 현재는 지원하고 있지 않지만, 대부분의 브라우저가 지원하고 있습니다. 안드로이드가 지원하지 않는것이 좀 그렇네요.. 하지만, 곧 지원하겠죠?
브라우저 히스토리 시작하기
- 히스토리 객체를 사용해서 현재 페이지로부터 이전 페이지나 다음 페이지로의 이동이 가능하다. 현재 페이지에서 3페이지 뒤로 이동하는 등의 작업도 가능하다.
- 브라우저의 히스토리 상태 객체에 데이터를 저장할 수도 있다. 상태 객체에 데이터를 추가한 후 데이터 저장을 위해 상태 객체를 현재 페이지에 push 한다. 반대로 저장한 데이터를 다시 꺼내서 데이터를 복원시킬 수도 있기 때문에 이 기능을 이용한 페이지 간에 데이터 전달이 가능하다.
History API 살펴보기
- window.history.length; // 히스토리 전체 개수
- window.history.go( [delta] ); // delta를 넣지 않으면 refresh, 음수를 넣으면 back 역할
- window.history.back(); // 이동할 수 없다면 무시.
- window.history.forward();
- window.history.pushState( data, title[, url] ); // url 은 저장하려는 데이터와 관련된 특정 페이지.
- window.history.replaceState( data, title[, url]);
// 히스토리 객체에 현재 저장된 데이터를 변경한다.
- window.onpopstate();
// 히스토리에 저장된 데이터를 다시 사용하기 위해 꺼낸 후 사용 가능한 상태가 됐을 때 발생.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>
Page To Page History
</title>
<script type="text/javascript">
function back()
{
window.history.back();
}
function forward()
{
window.history.forward();
}
function go()
{
var amount = document.getElementById( "amount" ).value;
window.history.go( amount );
}
function loader()
{
var length = window.history.length;
document.getElementById( "length" ).innerHTML = "<h1>" +
"History length : " + length + "</h1>";
}
function pushData()
{
var statedata = document.getElementById( "statedata" ).value;
var containerObject = {container:statedata};
history.pushState( containerObject, "item", "history.html" );
}
function popData( event )
{
var state = "Page: " + document.location + " Data : " + event.state.container;
document.getElementById( "state" ).innerHTML = "<h1>" + state + "</h1>";
}
window.addEventListener( "popstate", popData, false );
</script>
</head>
<body onload="loader();">
<h1>Page to Page History</h1>
<input type="button" value="Back" onclick="back();">
<input type="button" value="Forward" onclick="forward();">
<br><br><br>
Text to push : <input id="statedata" type="text">
<input type="button" value="Push Data" onclick="pushData();">
<br>
<div id="length"></div>
<br>
<div id="state"></div>
<br>
Pages to move by : <input id="amount" type="text">
<input type="button" value="Go" onclick="go();">
<br>
</body>
</html>
history.html
'프로그래밍 놀이터 > Web' 카테고리의 다른 글
| [Database] NoSQL 이란 무엇인가? ( SQL이 아니라구?? ) (0) | 2012.09.18 |
|---|---|
| [HTML] REST or RESTful 이 뭔가요? ( Representational state transfer ) (0) | 2012.09.18 |
| [HTML5] 인라인 편집 - 기초, Tutorial, Sample Code (3) | 2012.09.08 |
| [HTML5] 웹 폼 컨트롤( Web form control ) - 기초, Tutorial, Sample Code (0) | 2012.09.07 |
| [HTML5] 드래그 앤 드롭 ( Drag and Drop ) - 기초, Tutorial, Sample Code (0) | 2012.09.07 |
댓글