사용자가 페이지를 떠날 때 아약스로드 된 html을 해제하는 방법

Question

바로 지금 사용자가 내 사이트의 링크를 클릭하면 아약스를 사용하여 메인 프레임의 내용 (헤더와 사이드 바 페이지 전체에 상태를 유지해야하므로 다시로드하지 않아도됩니다.) url 표시 줄을 변경하려면 pushState 및 popState를 사용합니다.

명시 적으로 아약스 콘텐츠를 캐시하지 않으며 내 사이트는 정상적으로 작동하지만 너무 느려요. 특히 '뒤로'명령에서 특히 그렇습니다.

xhr html 요청을 캐시하면 내부적으로 잘 작동합니다. 그러나 사용자가 새 URL을 입력하고 사이트를 떠난 경우 '뒤로'명령을 누르는 경우 스타일이 지정되지 않은 헤더 및 사이드 바가없는 기본보기 콘텐츠 만 캐시에서 가져와 사이트에서 ' t 제대로 표시됩니다.

내부적으로 캐싱을 수행하지만 사용자가 페이지를 떠난 경우 캐시를 비울 수있는 방법이 있습니까?

Answer 1

지금 귀하의 설명을 이해할 것으로 생각됩니다.

귀하의 사이트에서 /page1.html을 방문하면 다운로드 한 HTML에 기본 콘텐츠 + 헤더 + 사이드 바가 있습니다. /page2.html을 방문하는 링크를 클릭하면 AJAX가 페이지를로드하고 다운로드 한 HTML에 주 콘텐츠 만 있습니다. 나는 귀하의 사이트를 떠날 후 백 버튼으로 돌아올 때

그래서,이 시점에서 캐시,

이제 전체 /page1.html 및 부분 /page2.html을 포함, 브라우저/페이지 2를 잡고 .html 캐시에서. 그러나 그것은 부분적인 페이지 일 뿐이며 사이트는 "고장"니다.

XMLHttpRequest를 사용하여 요청한 경우에만 브라우저가 부분 콘텐츠를 가져 오게하는 것이 가장 이상적입니다. 또한 부분 및 전체 페이지를 모두 캐시 할 수 있으면 좋을 것입니다.

pjax은 AJAX 요청의 URL 쿼리에 _pjax=true 매개 변수를 추가하여이 문제를 해결합니다. 나는 이것이 대부분의 시나리오에서 잘 작동해야한다고 생각한다.

pushState()에 전달하는 URL에이 매개 변수를 추가하지 마십시오.

대체 방법은 전체 페이지를 다운로드 한 다음 AJAX를 사용할 때 #main-view을 추출하는 것입니다.

물론 PJAX로 전환하면 다른 사람의 문제를 만들 수 있습니다 (fragment 옵션을 사용해야 함).

pushState()를 처리하는 다른 JS 라이브러리는 내 HTMLDecor 프로젝트입니다. HTMLDecor를 사용하면 페이지에 기본 콘텐츠 + <link> 만 포함되어 머리글/바닥 글/세로 막대가 포함 된 다른 (아마도 공유되는) HTML 페이지에 연결됩니다. HTMLDecor는 이것을 브라우저 내에서 페이지에 추가합니다. 사용자가 링크를 클릭하여 다른 페이지를 탐색하면 HTMLDecor는 AJAX 및 pushState를 사용하므로 구성이 필요하지 않습니다. 물론 브라우저가 pushState를 지원하지 않으면 일반적인 링크 탐색이 발생합니다.