Ajax ปุ่มย้อนกลับและการอัปเดต DOM

หาก javascript แก้ไข DOM ในหน้า A ผู้ใช้จะไปที่หน้า B จากนั้นกดปุ่มย้อนกลับเพื่อกลับไปที่หน้า A การแก้ไข DOM ทั้งหมดของเพจ A จะหายไปและผู้ใช้จะแสดงเวอร์ชันที่ดึงมาจากเซิร์ฟเวอร์

มันใช้งานได้ใน stackoverflow, reddit และเว็บไซต์ยอดนิยมอื่น ๆ (ลองเพิ่มความคิดเห็นทดสอบในคำถามนี้จากนั้นไปที่หน้าอื่นและกดปุ่มย้อนกลับเพื่อกลับมาความคิดเห็นของคุณจะ "หายไป")

สิ่งนี้สมเหตุสมผล แต่บางเว็บไซต์ (apple.com, basecamphq.com ฯลฯ ) กำลังบังคับให้เบราว์เซอร์ให้บริการผู้ใช้ในสถานะล่าสุดของหน้า (ไปที่http://www.apple.com/ca/search/?q=ipodคลิกที่ลิงก์ดาวน์โหลดที่ด้านบนจากนั้นคลิกปุ่มย้อนกลับ - การอัปเดต DOM ทั้งหมดจะถูกเก็บรักษาไว้)

ความไม่ลงรอยกันมาจากไหน?

คำตอบเดียว: เหนือสิ่งอื่นใดเหตุการณ์การยกเลิกการโหลดทำให้แคชย้อนกลับ / ไปข้างหน้าไม่ถูกต้องไปข้างหน้าแคชจะเป็นโมฆะ

เบราว์เซอร์บางตัวจะจัดเก็บสถานะปัจจุบันของหน้าเว็บทั้งหมดในที่เรียกว่า "bfcache" หรือ "page cache" สิ่งนี้ทำให้พวกเขาสามารถแสดงผลเพจซ้ำได้อย่างรวดเร็วเมื่อนำทางผ่านปุ่มย้อนกลับและไปข้างหน้าและรักษาสถานะของ DOM และตัวแปร JavaScript ทั้งหมด อย่างไรก็ตามเมื่อเพจมีเหตุการณ์ onunload เหตุการณ์เหล่านั้นอาจทำให้เพจอยู่ในสถานะไม่ทำงานดังนั้นเพจจึงไม่ถูกเก็บไว้ใน bfcache และต้องโหลดซ้ำ (แต่อาจโหลดจากแคชมาตรฐาน) และโหลดซ้ำ แสดงผลตั้งแต่เริ่มต้นรวมถึงเรียกใช้ตัวจัดการออนโหลดทั้งหมด เมื่อกลับไปที่เพจผ่าน bfcache DOM จะถูกเก็บไว้ในสถานะก่อนหน้าโดยไม่จำเป็นต้องเริ่มการทำงานของตัวจัดการ onload (เนื่องจากเพจโหลดแล้ว)

โปรดทราบว่าลักษณะการทำงานของ bfcache นั้นแตกต่างจากแคชของเบราว์เซอร์มาตรฐานที่เกี่ยวกับ Cache-Control และส่วนหัว HTTP อื่น ๆ ในหลาย ๆ กรณีเบราว์เซอร์จะแคชหน้าใน bfcache แม้ว่าจะไม่ได้เก็บไว้ในแคชมาตรฐานก็ตาม

jQuery จะแนบเหตุการณ์ยกเลิกการโหลดเข้ากับหน้าต่างโดยอัตโนมัติดังนั้นน่าเสียดายที่การใช้ jQuery จะตัดสิทธิ์ไม่ให้เพจของคุณถูกเก็บไว้ใน bfcache สำหรับการเก็บรักษา DOM และย้อนกลับ / ไปข้างหน้าอย่างรวดเร็ว. [อัปเดต: สิ่งนี้ได้รับการแก้ไขแล้วใน jQuery 1.4 เพื่อให้ใช้ได้กับ IE เท่านั้น]

• ข้อมูลเกี่ยวกับ Firefox bfcache
• ข้อมูลเกี่ยวกับ Safari Page Cacheและการเปลี่ยนแปลงในอนาคตที่เป็นไปได้เกี่ยวกับการยกเลิกการโหลดเหตุการณ์
• Opera ใช้การนำทางประวัติอย่างรวดเร็ว
• Chrome ไม่มีแคชของหน้า ( [1] , [2] )
• หน้าสำหรับเล่นกับการปรับแต่ง DOM และ bfcache:
  • หน้านี้จะถูกเก็บไว้ในแคชปกติ
  • หน้านี้จะไม่ แต่จะยังคงเป็น bfcached

ฉันพยายามทำให้ Chrome ทำงานเหมือน Safari และวิธีเดียวที่ฉันพบว่าได้ผลคือการตั้งค่าCache-control: no-storeในส่วนหัว การดำเนินการนี้บังคับให้เบราว์เซอร์ดึงข้อมูลเพจจากเซิร์ฟเวอร์อีกครั้งเมื่อผู้ใช้กดปุ่มย้อนกลับ ไม่เหมาะ แต่ดีกว่าการแสดงหน้าเว็บที่ล้าสมัย

Facebook จดจำสถานะของเพจโดยการแก้ไขตัวระบุแฮชใน URL สำหรับคำขอ ajax การเปลี่ยนแปลงเหล่านี้จะถูกบันทึกไว้ในประวัติของเบราว์เซอร์ดังนั้นเมื่อผู้ใช้คลิกปุ่มย้อนกลับแฮชจะเปลี่ยนไปตามเดิม ดังนั้นจึงเป็นนัยว่าคุณจะต้องมี Javascript เพื่อตรวจสอบ has identifier และตอบสนองเมื่อเบราว์เซอร์เปลี่ยน Andreas Blixt มีกัญชาตรวจสอบสคริปต์ใช้ได้

สิ่งนี้ไม่เกี่ยวข้องกับสัญลักษณ์แฮช (#)

หากคุณจะตรวจสอบส่วนหัว HTTP ของ apple ก็เพียงแค่แคชหน้านั้น

การใช้ตัวระบุแฮช / แฟรกเมนต์ URL เป็นวิธีที่ใช้กันทั่วไปในการเชื่อมโยง / จดจำสถานะในเว็บแอปพลิเคชันที่อาศัยการอัปเดต Ajax และ DOM

ตรวจสอบโครงการประวัติศาสตร์ที่เรียบง่ายสำหรับแนวคิดบางอย่าง เป็นไปได้ที่จะตรวจสอบ URL สำหรับการเปลี่ยนแปลงแฮชและ rsh ทำสิ่งนี้โดยคำนึงถึงความแตกต่างของเบราว์เซอร์

สำหรับใครก็ตามที่ประสบปัญหาRailsและสิ่งนี้ - ปัญหาของคุณไม่ใช่ bfcache (ฉันคิดว่ามันเป็น) - เป็นturbolinksอัญมณี นี่คือวิธีลบ

หวังว่าจะช่วยประหยัดเวลาได้บ้างและเอาหัวโขกกำแพง

สิ่งที่คุณกำลังมองหาคือการจัดการแฮช URL บางประเภท # ใน url มีไว้สำหรับฝั่งไคลเอ็นต์เท่านั้น

เมื่อคุณเปลี่ยนสถานะด้านหลังด้วย JS คุณจะอัปเดตข้อมูลใน # ของ url

นอกจากนี้คุณยังเพิ่มการสำรวจความคิดเห็นบางประเภทที่ตรวจสอบว่าแฮชมีการเปลี่ยนแปลงหรือไม่และโหลดสถานะของเพจโดยอิงจากข้อมูลใหม่ในแฮช

ดูที่นี้:

http://ajaxpatterns.org/Unique_URLs