Cập nhật Ajax, nút quay lại và DOM

Nếu javascript sửa đổi DOM trong trang A, người dùng điều hướng đến trang B và sau đó nhấn nút quay lại để quay lại trang A. Tất cả các sửa đổi đối với DOM của trang A đều bị mất và người dùng được hiển thị với phiên bản được truy xuất ban đầu từ máy chủ.

Nó hoạt động theo cách đó trên stackoverflow, reddit và nhiều trang web phổ biến khác. (hãy thử thêm nhận xét kiểm tra vào câu hỏi này, sau đó điều hướng đến trang khác và nhấn nút quay lại để quay lại - nhận xét của bạn sẽ "biến mất")

Điều này có lý, tuy nhiên một số trang web (apple.com, basecamphq.com, v.v.) bằng cách nào đó buộc trình duyệt phải phục vụ người dùng trạng thái mới nhất của trang. (truy cập http://www.apple.com/ca/search/?q=ipod , nhấp vào nói liên kết Tải xuống ở trên cùng và sau đó nhấp vào nút quay lại - tất cả các bản cập nhật DOM sẽ được giữ nguyên)

sự không nhất quán đến từ đâu?

Một câu trả lời: Trong số những thứ khác, các sự kiện dỡ hàng khiến bộ đệm lùi / chuyển tiếp bị vô hiệu .

Một số trình duyệt lưu trữ trạng thái hiện tại của toàn bộ trang web trong cái gọi là "bfcache" hoặc "page cache". Điều này cho phép họ hiển thị lại trang rất nhanh khi điều hướng qua các nút quay lại và chuyển tiếp, đồng thời duy trì trạng thái của DOM và tất cả các biến JavaScript. Tuy nhiên, khi một trang chứa các sự kiện onunload, những sự kiện đó có khả năng đưa trang vào trạng thái không hoạt động và do đó trang không được lưu trữ trong bfcache và phải được tải lại (nhưng có thể được tải từ bộ đệm chuẩn) và được hiển thị từ đầu, bao gồm chạy tất cả các trình xử lý tải lên. Khi quay lại một trang qua bfcache, DOM được giữ ở trạng thái trước đó của nó mà không cần kích hoạt các trình xử lý onload (vì trang đã được tải).

Lưu ý rằng hoạt động của bfcache khác với bộ đệm chuẩn của trình duyệt liên quan đến Cache-Control và các tiêu đề HTTP khác. Trong nhiều trường hợp, các trình duyệt sẽ lưu vào bộ nhớ đệm một trang trong bfcache ngay cả khi nó không lưu trữ trong bộ đệm chuẩn.

jQuery tự động đính kèm một sự kiện dỡ bỏ vào cửa sổ, vì vậy rất tiếc khi sử dụng jQuery sẽ khiến trang của bạn không đủ điều kiện được lưu trữ trong bfcache để bảo quản DOM và quay lại / chuyển tiếp nhanh chóng. [Cập nhật: điều này đã được sửa trong jQuery 1.4 để nó chỉ áp dụng cho IE]

• Thông tin về bfcache của Firefox
• Thông tin về Bộ đệm ẩn Trang Safari và các thay đổi có thể có trong tương lai đối với cách hoạt động của các sự kiện dỡ tải
• Opera sử dụng điều hướng lịch sử nhanh
• Chrome không có bộ nhớ đệm trang ( [1] , [2] )
• Các trang để chơi với thao tác DOM và bfcache:
  • Trang này sẽ được lưu trữ trong bộ nhớ cache thông thường
  • Trang này sẽ không, nhưng vẫn sẽ được lưu vào bộ đệm ẩn

Tôi đã cố gắng làm cho Chrome hoạt động giống như Safari và cách duy nhất tôi thấy rằng nó hoạt động là đặt Cache-control: no-storetrong tiêu đề. Điều này buộc trình duyệt phải tìm nạp lại trang từ máy chủ khi người dùng nhấn nút quay lại. Không lý tưởng, nhưng tốt hơn là được hiển thị một trang lỗi thời.

Facebook ghi nhớ trạng thái trang bằng cách sửa đổi mã định danh băm trong URL cho các yêu cầu ajax. Những thay đổi này được ghi lại trong lịch sử trình duyệt, vì vậy khi người dùng nhấp vào nút quay lại, hàm băm sẽ thay đổi thành như trước đó. Vì vậy, có nghĩa là bạn sẽ cần một số Javascript để giám sát mã nhận dạng có và phản ứng khi nó được trình duyệt thay đổi. Andreas Blixt có sẵn một tập lệnh giám sát băm .

Điều này không liên quan gì đến ký hiệu băm (#).

Nếu bạn kiểm tra các tiêu đề HTTP của apple, nó chỉ đơn giản là bộ nhớ đệm của trang.

Sử dụng mã định danh băm / phân đoạn URL là một cách khá phổ biến để kết nối / ghi nhớ trạng thái trong ứng dụng web dựa trên các bản cập nhật Ajax và DOM.

Kiểm tra dự án Lịch sử Thực sự Đơn giản để biết một số ý tưởng. Có thể theo dõi URL để biết các thay đổi đối với hàm băm và rsh thực hiện điều này, có tính đến sự khác biệt của trình duyệt.

Đối với bất kỳ ai đang gặp vấn đề với Railsvà điều này - vấn đề của bạn không phải là bfcache (tôi nghĩ là vậy) - đó là turbolinksviên ngọc quý. Đây là cách để loại bỏ nó.

Hy vọng rằng điều này sẽ giúp bạn tiết kiệm thời gian và đập đầu vào tường.

Những gì bạn đang tìm kiếm là một số kiểu quản lý băm URL. # Trong url chỉ dành cho phía khách hàng.

Khi bạn thay đổi trạng thái của mặt sau bằng JS, thì bạn cập nhật dữ liệu trong # của url.

Ngoài ra, bạn thêm một số kiểu thăm dò theo dõi xem băm có thay đổi hay không và tải trạng thái của trang dựa trên dữ liệu mới trong băm.

Hãy xem này:

http://ajaxpatterns.org/Unique_URLs