심재운 블로그




보통 비동기 화면을 구현 하는 중에 , 뒤로가기 back 버튼 마우스를 클릭할 때가 있습니다.

비동기 화면은 동적으로 랜더링 하므로 브라우저에서 url 주소값을 저장하지 않아 제일 첫페이지로 이동하게 됩니다.

따라서 브라우저에 url 주소값을 직접 스크립트로 알려주는 방법이 있는데요.

window.history.pushState() 함수를 사용해서 브라우저 히스토리를 조작할 수 있습니다.


자세한 내용은 https://developer.mozilla.org/ko/docs/Web/API/History_API 사이트를 참고하세요.



<h1>
Navigation Without Refresh
<span></span>
</h1>
<h2>Current Page:
<span>/</span>
</h2>
<ul id="menu-nav">
<li>
<a href="/page-1/" title="Pagina 1">Page 1</a>
</li>
<li>
<a href="/page-2/" title="Pagina 2">Page 2</a>
</li>
<li>
<a href="/page-3/" title="Pagina 3">Page 3</a>
</li>
</ul>




// this should be the Ajax Method.
// and load the url content
var setCurrentPage = function (url) {
$('h2 span').html(url || "/");
$("#menu-nav a[href='" + url + "']").fadeTo(500, 0.3);
};

$('#menu-nav a').click(function (e) {
e.preventDefault();
var targetUrl = $(this).attr('href'),
targetTitle = $(this).attr('title');

$("#menu-nav a[href='" + window.location.pathname + "']").fadeTo(500, 1.0);

window.history.pushState({
url: "" + targetUrl + ""
}, targetTitle, targetUrl);
setCurrentPage(targetUrl);
});

window.onpopstate = function (e) {
$("#menu-nav a").fadeTo('fast', 1.0);
setCurrentPage(e.state ? e.state.url : null);
};







이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

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

비밀글모드