pushState 이후에 back을 누르면 페이지를 다시로드하는 방법?

Question

현재 Im은 코드 이그니 터를 사용하여 예쁜 URL을 가지고 있으며 기본적으로 아약스를 사용하여 체육관을 검색 할 수있는 시스템을 사용하고 있습니다.

체육관의 목록 후 푸시 상태를 사용하여

임과 같이로드 :

example.com/list/search_key/pagination-page/sort-by/filters~seperated~by~that search_key는 체육관 검색을 원하는 지역의 도시, 주 또는 이웃이며, 필터는 개별 체크 박스입니다.

.ajax를 사용하여 검색 키와 각 개별 확인란 값 (1 또는 0)을 게시물을 통해 보내면 코드 점화기가 POST 데이터와 PHP를 사용하여 위와 같은 URL을 생성합니다. ajax 성공 푸시는 URL이 PHP가 생성 한 URL임을 나타냅니다.

문제는 말하기 페이지 매기기를 사용하여 페이지 2로 이동하고 페이지 -1로 이동하려는 경우 자연스럽게 브라우저 뒤로 버튼을 사용한다는 것입니다. 문제는 URL 주소 표시 줄을 현재 URL 앞에 붙여 넣기 만하면 실제로 페이지 내용을 변경하지 않는다는 것입니다. 이전 (이전) URL 또는 새로 고침 등을 사용하여 페이지를 다시로드해야합니다.

심지어 URL 데이터를 사용하여 양식을 다시 제출하기 위해 아약스를 사용할 수도 있지만이를 수행하는 방법에 대한 실마리가 없습니다.

나는 몇 가지 시도를했지만 전혀 작동하지 않습니다. 거의 Google의 첫 페이지에서 모든 것을 시도했지만 모든 것이 유망 해 보이지만 실제로는 아무 것도 작동하지 않습니다.

푸시 스테이트 URL이 이전 URL로 변경되면 페이지를 새로 고칠 수 있습니까?

PS을 Heres는 필자가 시도 키 몇 가지 :

당신이 당신의 아약스 성공 방법에서 상태를 추진하고 있기 때문에

<script type="text/javascript"> 
$(window).unload(function(e){ 
    e.preventDefault(); 
    alert("Back was pressed!"); 
}); 
// If this wouldve worked, it wouldve atleast alerted me that. 

// The code off this URL: http://www.mrc-productivity.com/techblog/?p=1235 

// Some of the codes off this URL: http://forum.jquery.com/topic/howto-force-page-reload-refresh-of-previous-page-when-back-button-is-pressed 

// A few others. 
</script> 

Answer 1

, 당신은 window.onpopstate 방법을 사용하여 다시 버튼을 감지 할 수 있습니다.

history.pushState() 또는 history.replaceState()를 호출해도 popstate 이벤트가 발생하지 않습니다. popstate 이벤트는 뒤로 버튼을 클릭하거나 JavaScript에서 history.back()을 호출하는 등 브라우저 액션을 수행하는 경우에만 트리거됩니다.

var stateObj = { foo: "bar" }; 
history.pushState(stateObj, "page 2", "bar.html"); 

window.onpopstate = function(event) { 
    if(event && event.state) { 
     // event.state.foo 
    } 
}