Ajax, geri düğmesi ve DOM güncellemeleri

Javascript, A sayfasındaki DOM'u değiştirirse, kullanıcı B sayfasına gider ve ardından A sayfasına geri dönmek için geri düğmesine basar. A sayfasının DOM'unda yapılan tüm değişiklikler kaybolur ve kullanıcıya orijinal olarak sunucudan alınan sürüm sunulur.

Stackoverflow, reddit ve diğer birçok popüler web sitesinde bu şekilde çalışır. (bu soruya test yorumu eklemeyi deneyin, ardından farklı sayfaya gidin ve geri dönmek için geri düğmesine basın - yorumunuz "gitmiş" olacaktır)

Bu mantıklıdır, ancak bazı web siteleri (apple.com, basecamphq.com vb.) Bir şekilde tarayıcıyı kullanıcıya sayfanın en son durumunu sunmaya zorluyor. ( http://www.apple.com/ca/search/?q=ipod adresine gidin , üstteki İndirilenler bağlantısını tıklayın ve ardından geri düğmesini tıklayın - tüm DOM güncellemeleri korunacaktır)

tutarsızlık nereden geliyor?

Bir yanıt: Diğer şeylerin yanı sıra, kaldırma olayları geri / ileri önbelleğin geçersiz kılınmasına neden olur .

Bazı tarayıcılar, web sayfasının tamamının mevcut durumunu sözde "bfcache" veya "page cache" olarak saklar. Bu, geri ve ileri düğmeleriyle gezinirken sayfayı çok hızlı bir şekilde yeniden oluşturmalarına olanak tanır ve DOM ve tüm JavaScript değişkenlerinin durumunu korur. Ancak, bir sayfa onunload olaylarını içerdiğinde, bu olaylar sayfayı potansiyel olarak işlevsel olmayan bir duruma sokabilir ve bu nedenle sayfa bfcache'de depolanmaz ve yeniden yüklenmesi gerekir (ancak standart önbellekten yüklenebilir) ve yeniden tüm yük işleyicilerini çalıştırmak da dahil olmak üzere sıfırdan oluşturulur. Bfcache aracılığıyla bir sayfaya geri dönüldüğünde, DOM onload işleyicilerini çalıştırmaya gerek kalmadan önceki durumunda tutulur (çünkü sayfa zaten yüklüdür).

Önbellek Denetimi ve diğer HTTP üstbilgileri açısından bfcache davranışının standart tarayıcı önbelleğinden farklı olduğuna dikkat edin. Çoğu durumda, tarayıcılar başka türlü standart önbellekte saklamasa bile bfcache'deki bir sayfayı önbelleğe alır.

jQuery, pencereye otomatik olarak bir kaldırma olayı ekler, bu nedenle maalesef jQuery, DOM koruması ve hızlı geri / ileri için sayfanızın bfcache'de depolanmasını engeller.. [Güncelleme: bu sadece IE için geçerli olacak şekilde jQuery 1.4'te düzeltilmiştir]

• Firefox bfcache hakkında bilgiler
• Safari Sayfa Önbelleği hakkında bilgiler ve kaldırma olaylarının nasıl çalıştığına ilişkin gelecekteki olası değişiklikler
• Opera, geçmişte hızlı gezinmeyi kullanır
• Chrome'da sayfa önbelleği yok ( [1] , [2] )
• DOM manipülasyonları ve bfcache ile oynamak için sayfalar:
  • Bu sayfa normal önbellekte saklanacak
  • Bu sayfa olmayacak, ancak yine de önbelleğe alınacak

Chrome'un Safari'nin yaptığı gibi davranmasını sağlamaya çalışıyorum ve bunun işe yaradığını bulmamın tek yolu Cache-control: no-storebaşlıklarda ayarlamak . Bu, tarayıcıyı, kullanıcı geri düğmesine bastığında sunucudan sayfayı yeniden getirmeye zorlar. İdeal değil, ancak güncel olmayan bir sayfanın gösterilmesinden daha iyi.

Facebook, ajax istekleri için URL'deki hash tanımlayıcısını değiştirerek sayfa durumunu hatırlar. Bu değişiklikler tarayıcı geçmişine kaydedilir, bu nedenle kullanıcı geri düğmesini tıkladığında, karma eskisine göre değişir. Öyleyse, tanımlayıcıyı izlemek ve tarayıcı tarafından değiştirildiğinde tepki vermek için bir Javascript'e ihtiyacınız olacağı ima edilir. Andreas Blixt'in bir hash izleme komut dosyası var .

Bunun karma (#) sembolüyle ilgisi yoktur.

Apple'ın HTTP başlıklarını kontrol ederseniz, sadece sayfayı önbelleğe almaktır.

URL karma / parça tanımlayıcısını kullanmak, Ajax ve DOM güncellemelerine dayanan bir web uygulamasında durumu bağlamak / hatırlamak için oldukça yaygın bir yoldur.

Bazı fikirler için Gerçekten Basit Tarih projesine göz atın . Karma değişikliklere karşı URL'yi izlemek mümkündür ve rsh, tarayıcı farklılıklarını dikkate alarak bunu yapar.

Sorun yaşayan herkes için Railsve bu - senin sorunun bfcache değil (öyle olduğunu sanıyordum) - bu turbolinksmücevher. İşte nasıl kaldırılacağı.

Umarım bu size biraz zaman kazandırır ve kafanızı duvara vurur.

Aradığınız şey, bir tür URL karma yönetimi içindir. URL’deki # yalnızca istemci tarafı içindir.

Sırtın durumunu JS ile değiştirdiğinizde, URL'nin # içindeki verileri güncellersiniz.

Ayrıca, karmanın değişip değişmediğini izleyen ve karmadaki yeni verilere dayanarak sayfanın durumunu yükleyen bir tür yoklama eklersiniz.

Şuna bir bak:

http://ajaxpatterns.org/Unique_URLs