Ajax/HTML5 기록 상태 (popState, pushState 등) - 뒤로 버튼 동작

Question

pushState HTML5의 기능에 대해 몇 가지 질문이 있지만 두 가지 문제점에 관해서는 찾을 수 없습니다. 내 popstate 핸들러과 같이 정의된다 :

는

$(window).bind('popstate', function (e) { 
    if (!e.originalEvent.state) 
     return; 

    LoadContent({ url: e.originalEvent.state.path }); 
} 

LoadContent 전화는 단순히 Ajax를 사용하여 콘텐츠 창을 채 웁니다.

문제 1 : 내 사이트의 page1에서 검색을 시작한다고 가정 해 봅시다. state이 없으므로 LoadContent은 호출되지 않습니다. 의 내 검색 기록이 너무 같다고 가정 해 봅시다 :

page1 -> (ajax)page2 -> (ajax)page3 -> (back pressed)page2 -> (back pressed)page1 

내가 page2로 이동하는 브라우저의 뒤로 버튼을 누르면, 모든 것이 괜찮습니다. 그러나 page1, e.originalEvent.state에 대한 내용을로드해야 다시 다시 누르면 LoadContent가 호출되지 않으므로 내용은 page2과 동일하게 유지된다는 의미이므로 null입니다. 다시 누르면 page1의 콘텐츠를로드 할 수 있습니까?

문제 2 : 우리는 우리가 아약스를 통해 2 페이지의 내용을로드 의미 page3에서 page2 다시 눌러 상상해보십시오. 이제 (즉, 브라우저의 주소 표시 줄에 수동으로 URL 입력)을 으로 다시 입력하고 을 입력 한 다음을 다시 눌러 page2으로 이동하십시오. 두 번째 페이지를 표시하는 대신 브라우저는 이전에 검색 한 page2의 내용 인 아약스 결과을 표시하므로 나머지 페이지는로드되지 않습니다. 이 문제를 어떻게 해결할 수 있습니까?

도움 주셔서 감사합니다. 당신은 초기 페이지의 데이터가 역사에 푸시되지 않기 때문에, 전체 페이지를 다시로드 또는 아약스를 통해 다시로드하거나 필요

: 문제의 경우 1

Answer 1

. 그렇지 않으면 페이지로드 이벤트를 변경하여 아약스의 데이터를로드하고 내용을 동적으로로드 한 다음 히스토리에 푸시되어야하는 필요한 json 데이터를 갖게됩니다.

Answer 2

방금 ​​문제 2과 동일한 문제가 발생했습니다.

웹 헤더가 XHR 콘텐츠를 캐싱하고 표시하지 못하도록 HTTP 헤더를 보낼 수 있습니다. History 객체 JS를 실행하는 페이지에서이 작업을 수행하십시오. PHP에서

:

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); 
header("Cache-Control: post-check=0, pre-check=0", false); 
header("Pragma: no-cache");