2014-04-01 4 views
2

AJAX를 사용하여 내용이 변경되고 history.pushstate를 사용하여 URL이 업데이트되는 페이지가 있습니다. 업데이트가 끝나면 window.onpopstate 덕분에 앞뒤로 이동하는 것도 제대로 작동합니다.history.pushState 및 window.onpopstate 여러 페이지에 걸쳐

onpopstate에 대한 코드는 다음과 같습니다

window.onpopstate = function (e) { 
    if (e.state) { 
    if (e.state.type == 'product-detail' && $('.product-container').length == 1) { 
     updateProductDetail(e.state.html); 
    } 
    else { 
     location.reload(); 
    } 
    } 
}; 

그래서 나는 팝업 상태를 사용해야하는지 여부를 확인하고 내가 페이지에 나는 아직도 여부에 의해 반환되는 I 업데이트 정보 (html로 데이터를 다시 적용 할 수있는 AJAX 호출). 그렇지 않은 경우 (즉, 다른 페이지에서 업데이트를 적용 할 수 없음) 새 URL (푸시 상태로 저장된 URL)을 사용하여 전체 페이지를 새로 고침합니다.

이 페이지에서 다른 페이지로 이동 한 다음 뒤로를 누르면 예외가 예상대로 작동합니다. Chrome은 AJAX 요청의 내용 즉, 업데이트 된 정보 만 표시합니다 (다른 js, css 등은 사용하지 않습니다). Firefox는 전체 페이지를로드하는 것으로 보이며 다시 누르면 다시 온 포켓 상태가 사용됩니다. Chrome은 그냥 돌아가서 AJAX 요청에 의해 수신 된 데이터 만 표시합니다. 전체 페이지 (document.documentElement.outerHTML)를 푸시 상태의 "html"속성에 넣으려고했지만 아무 소용이 없습니다.

추신 : 크롬 디버거를 사용하면 두 번째 페이지에서 '뒤로'를 누르면 window.onpopstate가 실행되지 않습니다.

+0

나는 똑같은 문제를 가지고 나는 당신이 어떻게 해결 않았다 궁금 문제? – Szenis

답변

0

솔루션을 이미 찾았습니까? 하지 않으면 문서에서 살펴

Location reload() Method on W3Schools

특히이 부분 :

구문

location.reload (forceGet)

매개 변수가

값 forceGet 부울.

다시로드 유형을 지정합니다. false - 기본값. 캐시에서 현재 페이지를 다시로드합니다. - 사실 현재 페이지는

는 그래서 "다른"부분에이 코드를 시도 서버에서 다시로드해야합니다 :

location.reload(true);