브라우저 이전/다음 버튼을 클릭했을 때 HTML 히스토리 상태 재사용

Question

페이지 내용의 AJAX로드를 수행하기 위해 HTML5history feature을 구현하려고합니다. 지금까지 내 JS는 다음과 같습니다

// saving current page to history 
var current_url = "page1"  
var page_content1 = $('body').html(); 
history.pushState({page_content: page_content}, current_url, current_url); 

// loading new page with AJAX 
var new_url="page2" 
$.getJSON(new_url,get_data,function(data){ 
    $('body').html(data.page_content); 

    var page_content2 = $('body').html(); 
    history.pushState({page_content: page_content2}, new_url, new_url); 
}); 

- OK : JS는 브라우저 URL가 "PAGE1"에서 변경되는 body과에 제대로 AJAX를 통해로드 "페이지 2"의 내용을 실행할 때 "2 쪽".
- OK : 나는 previous 브라우저 버튼을 클릭하면이 브라우저 URL는 "페이지 2"에서 "PAGE1"
에서 다시 변경 - 확인하지 : 나는 previous 브라우저 버튼을 클릭하면 그러나, 페이지 내용입니다 "page1"에 사용 된 것으로 변경되지 않았습니다.

Q : 이전/다음 브라우저 단추에 어떤 이벤트를 바인딩해야합니까? 그리고 history 메서드를 사용하여 해당 단추를 누른 후 상태 데이터를 검색해야합니까? 당신이 다시로 탐색 할 때 사용자가 방문 올바르게로드 할 초기 페이지를 원한다면, 당신은 그것을 위해 상태를로드 할 초기 페이지로드하는 동안 history.replaceState()를 사용해야한다는 점는

Answer 1

나는 상태 데이터를 검색하는 브라우저 previous/next 버튼을 상호 작용을 처리하기 위해 window'statechange' 이벤트에 의존 history.js과 getState() 방법을 사용하여 끝났다.

Answer 2

window.onpopstate = function (e) { 
    if (e.state) { 
     // Work with state object here 
    } 
} 

주 페이지.

이미이 작업을 수행 할 수있는 jQuery 플러그인이 많이 있습니다. 그들 중 일부는 IE (iframe 사용)를 지원하려고합니다. 이 문제를 재발견하기 전에 기존 솔루션 중 일부를 시도해 볼 수 있습니다.