웹 페이지를 작성하다보면 브라우저의 뒤로가기 액션이(천하에 다시 없을 개 !!#@$!@%)
사람 피 말리게 하는 경우게 종종 있다.
특히나 ajax를 통해 특정 부분만 갱신되는 페이지에서 뒤로가기 버튼을 눌렀을 때,
이전 내용으로 돌아가는게 아닌 이전 페이지로 휙 하고 나가버리는 문제가 발생하는데,
해당 부분을 정상적인 동작으로 대체하기 위해서 처리한 내용이다.
** HTML5를 지원하는 브라우저에선 history 객체에 대한 API를 제공하므로,
아래에 기입된 것 처럼 별도로 해쉬값을 기록해 처리하는 방법 따윈 상큼히 무시하는게 정신건강에 이롭겠다.
(IE 8, 9 를 지원해야 하는 경우가 대부분이라.. 과감하게 쓰기엔 무리가 있다 치더라도 -_-;;)
크게 어려운 부분은 없으나, 대략적인 설명을 한다면
document.location.hash 값을 임의로 변경하여, hashchange 이벤트를 발생시키는 것인데.
아래 소스 코드에선 페이지 번호를 해쉬에 기록해
해당 페이지 번호에 맞는 리스트를 정상적으로 가져오도록 처리되었다.
// 파셜뷰 호출하는 부모 페이지에 기입할 스크립트
@* 20150820 : 뒤로가기 처리. *@ <script> var container = $("#container"); $.ajaxHistory.historyCallBackMethod = function (hash) { var url = '@Url.Action("PartialList")' + "?" + hash.replace('#', ''); $.ajaxHistory.currentHashNum = parseInt(hash.replace('#pageNo=', '')); container.load(url, function () { if ($.ajaxHistory.beforeHashNum <= $.ajaxHistory.currentHashNum) { window.scroll(0, 0); } $.ajaxHistory.beforeHashNum = $.ajaxHistory.currentHashNum; }); }; if (document.location.hash && document.location.hash.indexOf("pageNo") > -1 && document.location.hash != "#pageNo=1") { $.ajaxHistory.historyCallBackMethod(document.location.hash); } else { document.location.hash = "pageNo=1"; } </script>
// partial 뷰로 처리된 부분에 기입할 스크립트
<script type="text/javascript"> $(document).ready(function () { @*$("#btnPrev").click(function () { $.post('@Url.Action("PartialList")', { 'pageNo': "@(ViewBag.PageNo - 1)" }, function (data) { $("#divList").html(data); }); }); $("#btnNext").click(function () { $.post('@Url.Action("PartialList")', { 'pageNo': "@(ViewBag.PageNo + 1)" }, function (data) { $("#divList").html(data); }); });*@ @* 20150820 : 뒤로가기 처리. *@ $("#btnPrev").click(function () { $.ajaxHistory.beforeHashNum = @(ViewBag.PageNo); history.back(); }); $("#btnNext").click(function () { $.ajaxHistory.beforeHashNum = @(ViewBag.PageNo); document.location.hash = "pageNo=@(ViewBag.PageNo + 1)"; }); }); </script>
// 스크립트
(function ($) { $.extend( { ajaxHistory : { historyCallBackMethod: null, currentHashNum: '', beforeHashNum: '' } }); })(jQuery); $(function () { $(window).unbind('hashchange').bind('hashchange', function (e) { var hash = document.location.hash; if (hash.indexOf("pageNo") > -1) { if (typeof $.ajaxHistory.historyCallBackMethod == 'function') $.ajaxHistory.historyCallBackMethod(hash); } }); });
// 페이지 구조
<html>
내용
내용
내용
@Html.Action("partialViewPage")
</html>
//partialViewPage
<div>
이전버튼
다음버튼
</div>
'Script 이야기' 카테고리의 다른 글
| 자바스크립트 스트링 포멧 함수 (0) | 2015.10.20 |
|---|---|
| 스크립트 페이징 처리. (0) | 2015.10.20 |
| 페이지 뒤로 가기 막기 (0) | 2015.07.17 |
| DatePicker 달력 일자에 특정 이미지 표시하기. (0) | 2015.06.25 |
| 정규식 관련 에러 리포트 (0) | 2012.11.14 |