Ajax를 사용하여 페이지를 전환하면, history에 기록되지 않아 Back 버튼이 동작하지 않는다. 물론 해당 방식이 꼭 문제가 되는것은 아니지만, 모바일 웹 어플리케이션 개발에는 문제가 될 수 있다. 예를들어, 플리킹으로 페이징 후 상세로 전환하고 이전으로 돌아오는 씬을 Ajax로 구현하면 이전 페이징 정보를 history에 저장하고 있지 않기 때문에 처음(1페이지)으로 이동하게 된다. 사실 날코딩으로 해당 이슈를 해결할 수 있겠지만 생산성이 떨어진다는 문제가 있다.
좀더 쉽게 해결할 수 있는 방법이 없을까? 라는 물음으로 구글신한테 물어보니, pushState <- 요넘이 검색되더라. 해당 기능을 활용하여 날코딩하니, 깔금하게 동작은 하나 역시나 생산성 및 가독성이 현저하게 떨어지는 문제가 발생했다.
한번더! 도전하는 마음으로 웹전문가 후배님한테 연락 하니, 역쉬 전문가는 전문가 pjax를 알려주더라. 부랴부랴 레퍼런스를 읽어보니, 오호~ 좋더란말이쥐 ^^
샘플 데모를 작성하여 기록용으로 남긴다.
main.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Expires" CONTENT="-1">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
<title>pjax-demo</title>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/jquery.pjax.js"></script>
<script>
function moveDetail() {
$.pjax({url: '../pjax/detail.html', container: '#pjax-container'})
}
function more() {
var html = "";
for(var i = 0;i<50;i++)
html += "<div onclick='moveDetail()'>append"+i+"</div>";
$("#list").append(html);
}
</script>
</head>
<body>
<div id="pjax-container">
<div id="list">
<div onclick="moveDetail()">
안녕
</div>
<div onclick="moveDetail()">
안녕
</div>
<div onclick="moveDetail()">
안녕
</div>
<div onclick="moveDetail()">
안녕
</div>
</div>
<div onclick="more()">
더보기
</div>
</div>
</body>
</html>
detail.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Expires" CONTENT="-1">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
<title>pjax-demo</title>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/jquery.pjax.js"></script>
</head>
<body>
<div id="pjax-container">
<div id="detail">
상세
</div>
</div>
</body>
