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

자바 스크립트가 페이지 A에서 DOM을 수정하면 사용자는 페이지 B로 이동 한 다음 뒤로 버튼을 눌러 페이지 A로 돌아갑니다. 페이지 A의 DOM에 대한 모든 수정 사항이 손실되고 사용자에게 원래 서버에서 검색된 버전이 표시됩니다.

stackoverflow, reddit 및 기타 많은 인기 웹 사이트에서 이러한 방식으로 작동합니다. (이 질문에 테스트 댓글을 추가 한 다음 다른 페이지로 이동하고 뒤로 버튼을 눌러 돌아 오세요. 댓글이 "사라질"것입니다.)

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

불일치는 어디에서 왔습니까?

한 가지 대답 : 무엇보다도 언로드 이벤트로 인해 뒤로 / 앞으로 캐시가 무효화 됩니다.

일부 브라우저는 전체 웹 페이지의 현재 상태를 소위 "bfcache"또는 "페이지 캐시"에 저장합니다. 이렇게하면 뒤로 및 앞으로 버튼을 통해 탐색 할 때 페이지를 매우 빠르게 다시 렌더링 할 수 있으며 DOM 및 모든 JavaScript 변수의 상태를 보존 할 수 있습니다. 그러나 페이지에 onunload 이벤트가 포함 된 경우 이러한 이벤트는 잠재적으로 페이지를 작동하지 않는 상태로 만들 수 있으므로 페이지는 bfcache에 저장되지 않고 다시로드되어야합니다 (그러나 표준 캐시에서로드 될 수 있음). 모든 onload 핸들러 실행을 포함하여 처음부터 렌더링됩니다. bfcache를 통해 페이지로 돌아갈 때 DOM은 onload 핸들러를 실행할 필요없이 (페이지가 이미로드 되었기 때문에) 이전 상태로 유지됩니다.

bfcache의 동작은 Cache-Control 및 기타 HTTP 헤더와 관련하여 표준 브라우저 캐시와 다릅니다. 대부분의 경우 브라우저는 표준 캐시에 저장하지 않더라도 bfcache에 페이지를 캐시합니다.

jQuery는 자동으로 언로드 이벤트를 창에 첨부하므로 안타깝게도 jQuery를 사용하면 DOM 보존 및 빠른 뒤로 / 앞으로 가기를 위해 페이지가 bfcache에 저장되지 않습니다.. [업데이트 : jQuery 1.4에서 수정되어 IE에만 ​​적용됨]

• Firefox bfcache에 대한 정보
• Safari 페이지 캐시에 대한 정보 및 언로드 이벤트 작동 방식에 대한 향후 변경 가능성
• Opera는 빠른 히스토리 탐색을 사용합니다.
• Chrome에 페이지 캐시가 없습니다 ( [1] , [2] ).
• DOM 조작과 bfcache를 다루는 페이지 :
  • 이 페이지는 일반 캐시에 저장됩니다.
  • 이 페이지는 그렇지 않지만 여전히 bfcached입니다.

Chrome이 Safari처럼 작동하도록 노력해 왔으며 작동하는 유일한 방법 Cache-control: no-store은 헤더 에 설정 하는 것입니다. 이렇게하면 사용자가 뒤로 버튼을 누를 때 브라우저가 서버에서 페이지를 다시 가져옵니다. 이상적이지는 않지만 오래된 페이지를 표시하는 것보다 낫습니다.

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

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

애플의 HTTP 헤더를 확인한다면 단순히 페이지를 캐싱하는 것입니다.

URL 해시 / 조각 식별자를 사용하는 것은 Ajax 및 DOM 업데이트에 의존하는 웹 애플리케이션에서 상태를 후크 / 기억하는 매우 일반적인 방법입니다.

Really Simple History 프로젝트에서 몇 가지 아이디어를 확인하십시오 . URL에서 해시 변경 사항을 모니터링 할 수 있으며 rsh는 브라우저 차이를 고려하여이를 수행합니다.

문제가있는 사람을 위해 Rails-당신의 문제는 bfcache가 아닙니다 (내 생각에)-그것은 turbolinks보석입니다. 제거하는 방법은 다음과 같습니다 .

바라건대 이것은 시간을 절약하고 벽에 머리를 부딪 힐 것입니다.

당신이 찾고있는 것은 URL 해시 관리 유형입니다. URL의 #은 클라이언트 측 전용입니다.

JS로 뒷면의 상태를 변경하면 URL #의 데이터를 업데이트합니다.

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

이것 좀보세요 :

http://ajaxpatterns.org/Unique_URLs