Ajax, 뒤로 버튼 및 DOM 업데이트

Ajax, 뒤로 버튼 및 DOM 업데이트

javascript가 A페이지에서 DOM을 수정하면 사용자는 B페이지로 이동한 후 뒤로 버튼을 눌러 A페이지로 돌아갑니다.A페이지의 DOM 에 대한 모든 수정이 없어지고, 유저에게는, 최초로 서버로부터 취득한 버전이 표시됩니다.

스택오버플로우, 레딧 및 기타 많은 인기 웹사이트에서 이와 같이 작동합니다.(테스트 코멘트를 이 질문에 추가하고 다른 페이지로 이동하여 돌아가기 버튼을 누릅니다.코멘트는 "사라집니다").

이는 타당하지만 일부 웹사이트(apple.com, basecamphq.com 등)에서는 브라우저가 사용자에게 페이지의 최신 상태를 제공하도록 강요하고 있습니다.(http://www.apple.com/ca/search/?q=http://http://www.apple.com/ca/search/로 이동하여 상단에 있는 다운로드 링크를 클릭한 다음 뒤로 버튼을 클릭합니다. 모든 DOM 업데이트가 유지됩니다.

모순은 어디서 오는가?

한 가지 답변: 무엇보다도 언로드 이벤트로 인해 백/포워드 캐시가 비활성화됩니다.

일부 브라우저는 전체 웹 페이지의 현재 상태를 이른바 "bfcache" 또는 "페이지 캐시"에 저장합니다.이를 통해 뒤로 및 앞으로 버튼을 사용하여 이동할 때 페이지를 매우 빠르게 다시 렌더링할 수 있으며 DOM 및 모든 JavaScript 변수의 상태를 유지할 수 있습니다.단, 페이지에 언로드 이벤트가 포함되어 있는 경우 이러한 이벤트는 페이지가 기능하지 않는 상태가 될 수 있으므로 페이지는 bfcache에 저장되지 않고 새로고침(단, 표준 캐시에서 로드될 수 있음)되어 모든 온로드 핸들러의 실행을 포함하여 처음부터 다시 렌더링해야 합니다.bfcache를 통해 페이지로 돌아가면 DOM은 이전 상태로 유지됩니다(페이지가 이미 로드되어 있기 때문에) 온로드 핸들러를 기동할 필요가 없습니다).

캐시 제어 및 기타 HTTP 헤더에 관해서는 bfcache의 동작이 표준 브라우저 캐시와 다르다는 점에 유의하십시오.대부분의 경우 브라우저는 페이지를 표준 캐시에 저장하지 않더라도 bfcache에 캐시합니다.

jQuery는 자동으로 언로드 이벤트를 창에 첨부하기 때문에 불행히도 jQuery를 사용하면 DOM 보존 및 빠른 되돌림/전송을 위해 페이지가 bfcache에 저장되지 않습니다.[업데이트: jQuery 1.4에서는 IE에만 적용되도록 수정되었습니다]

• Firefox bfcache에 관한 정보
• Safari 페이지 캐시 및 언로드 이벤트 작동 방식에 대한 향후 가능한 변경에 대한 정보
• Opera는 고속 히스토리 네비게이션을 사용합니다.
• Chrome에는 페이지 캐시가 없습니다([1], [2]).
• DOM " " bfcache " " " :
  • 이 페이지는 일반 캐시에 저장됩니다.
  • 이 페이지는 표시되지 않지만 계속 저장된다.

와 같은 동작을은 Safari를 설정하는 입니다.Cache-control: no-store를 참조해 주세요.사용자가 뒤로 버튼을 누르면 브라우저가 강제로 서버에서 페이지를 다시 가져옵니다.이상적이지는 않지만 오래된 페이지를 표시하는 것보다는 낫습니다.

Facebook은 Ajax 요청 URL의 해시 식별자를 수정하여 페이지 상태를 기억합니다.이러한 변경은 브라우저 이력에 기록되므로 사용자가 뒤로 버튼을 클릭하면 해시가 이전 상태로 변경됩니다.따라서 브라우저에 의해 변경되었을 때 해당 식별자를 감시하고 반응하기 위해 Javascript가 필요하다는 것을 암시합니다.Andreas Blixt에는 사용 가능한 해시 모니터링 스크립트가 있습니다.

이것은 해시(#) 기호와는 관계가 없습니다.

만약 당신이 애플의 HTTP 헤더를 체크한다면, 그것은 단순히 페이지를 캐싱하는 것이다.

URL 해시/플래그먼트 식별자를 사용하는 것은 Ajax 및 DOM 업데이트에 의존하는 웹 응용 프로그램에서 상태를 후크/기억하기 위한 매우 일반적인 방법입니다.

아이디어에 대해서는 Really Simple History 프로젝트를 확인하십시오.해시 변경에 대한 URL을 감시할 수 있으며, rsh는 브라우저의 차이를 고려하여 이를 수행합니다.

「」의 문제가 .Rails bfcache입니다turbolinks보석입니다. 제거하는 방법은 다음과 같습니다.

이걸로 시간을 절약하고 벽에 머리를 부딪힐 수 있길 바라.

원하는 것은 URL 해시 관리 유형입니다.URL 의 # 는 클라이언트측 전용입니다.

JS에서 뒷면 상태를 변경하면 url의 #에 있는 데이터를 업데이트합니다.

또한 해시가 변경되었는지 모니터링하여 해시의 새 데이터를 기반으로 페이지 상태를 로드하는 폴링 유형을 추가합니다.

이것 좀 보세요.

http://ajaxpatterns.org/Unique_URLs

언급URL : https://stackoverflow.com/questions/1195440/ajax-back-button-and-dom-updates