아약스 호출을 수행 한 검색 페이지에서 페이지 하단에 결과 (동적 HTML)를 생성합니다. 문제는 사용자가 결과 (다른 사이트)로 이동 한 다음 뒤로 버튼을 누르고 원본 페이지와 쿼리가 있지만 동적 HTML이 사라진 경우입니다.동적 HTML 및 jquery가있는 뒤로 버튼
이전에 jquery 기록 플러그인을 사용했습니다. 사용자가 피자를 검색하면 내 URL에 "#pizza"를 추가해야합니다. 그리고 나서 내 페이지가로드 될 때마다 # 뒤에 오는 상태에서 상태를 복원 할 수 있습니다. 그러나 이렇게하려면 아약스 호출을 다시 작성하고 검색을 다시 수행 한 다음 동적 HTML을 다시 작성해야합니다.
사용자가 '뒤로'를 치면 결과 페이지가 그대로 남아 있기 때문에 구조가 가능합니까?
일부 브라우저는 뒷면의 페이지 상태를 유지하며 일부는 유지되지 않습니다. 또는 브라우저가 메모리 사용을 최소화하려고 시도하지 않는 한 때때로 사용합니다. 결론은, 당신이 그것에 의존 할 수 없다는 것입니다.
아약스 상태에 대해 mypage.html#content-hash 스타일 URL을 사용하는 경우 JS가 해시 태그를 처리하고 관련 페이지를 다시 만들 때 빈 레이아웃을로드해야합니다. 이것은 느리고 요청이 더 많을 수 있지만 해시는 서버로 이동하지 않으므로 JS가 필요한 내용을 확인해야합니다.
또는 HTML5 푸시 상태 API를 사용하는 경우 페이지를 다시로드하지 않고 창 전체 URL을 변경할 수 있습니다. 이 경우 서버는 아약스로 설정된 것과 동일한 상태로 전체 페이지를 렌더링 할 수 있습니다. Github의 일부 저장소를 탐색하면 어떻게하는지 확인할 수 있습니다. 폴더를 클릭하면 애니메이션이 적용되고 URL이 변경됩니다. URL을 통해 하위 폴더로 바로 이동하면 해당 하위 폴더 내용이있는 페이지가 이미 렌더링됩니다.
예, 검색 결과에 생성 된 링크에서 클릭 핸들러를 추가하십시오. 검색 문자열을 전달하십시오.
그런 다음 핸들러 함수에서 문자열을 쿠키 변수로 유지하십시오. 사용자가 클릭 한 페이지에서 돌아 오면 서버 측에서 결과를 검색 할 수 있습니다. 따라서 두 번째 호출없이 결과를 표시합니다.
아니요! 실제로는 아니지만 누군가가 반드시 플러그인, 로컬 저장소 또는 푸시 스테이트를 제안 할 것입니다. 가장 좋은 방법은 빈 검색으로 돌아가거나 아약스 호출을 한 번 더하거나 target = _blank를 사용하는 것입니다. – adeneo
HTML 구조/상태를'localStorage' (HTML5) 안에 저장할 수 있습니다. –