비동기 화면에서 뒤로가기 back 버튼 마우스를 클릭시 window.history.pushState 사용하기

보통 비동기 화면을 구현 하는 중에 , 뒤로가기 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);

};