HTML5 History API ใช้การกระโดดแบบรีเฟรชฟรี

ครั้งหนึ่งเมื่อฉันอยู่บน **. com ฉันพบว่าเอฟเฟกต์ภาพเคลื่อนไหวของการเข้าสู่ระบบและการลงทะเบียนนั้นงดงามมาก แต่สิ่งที่ทำให้ฉันตกใจคือหน้าจริงไม่สามารถกระโดดได้ ฉันทบทวนความรู้ด้านหน้าที่ฉันเรียนรู้และดูเหมือนจะไม่มีเทคโนโลยีที่จะบรรลุเป้าหมายนี้ ดังนั้นฉันจึงค้นหา Baidu และพบว่าสิ่งนี้ประสบความสำเร็จโดยใช้ API ประวัติใน HTML5

ครั้งหนึ่งเมื่อฉันอยู่ที่ **. com ฉันพบว่าเอฟเฟกต์ภาพเคลื่อนไหวของการเข้าสู่ระบบและการลงทะเบียนนั้นงดงามมาก แต่สิ่งที่ทำให้ฉันตกใจคือหน้าสามารถกระโดดได้แบบไม่ได้รีเฟรช ฉันตรวจสอบความรู้ด้านหน้าที่ฉันเรียนรู้และดูเหมือนจะไม่มีเทคโนโลยีใดที่สามารถบรรลุเป้าหมายนี้ได้ ดังนั้นฉันจึงพบว่าสิ่งนี้ประสบความสำเร็จโดยใช้ประวัติ API ใน HTML5 แต่มันไม่เคยมีประโยชน์ เทคโนโลยีนี้ไม่ได้ใช้จนกว่าบล็อกจะได้รับการแก้ไข

1. เพิ่มฟังก์ชั่นการเพิ่มรายการในประวัติเบราว์เซอร์ผ่าน JS

2. แสดง URL ในแถบที่อยู่เบราว์เซอร์ที่เปลี่ยนแปลงโดยไม่ต้องรีเฟรชหน้า

3. เพิ่มเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้คลิกปุ่มย้อนกลับของเบราว์เซอร์

ผ่านสามจุดข้างต้นเป็นไปได้ที่จะเปลี่ยน URL แบบไดนามิกในแถบที่อยู่เบราว์เซอร์โดยไม่ต้องรีเฟรชหน้าและแสดงเนื้อหาหน้าแบบไดนามิก

ตัวอย่างเช่น: เมื่อเนื้อหาของหน้า A และหน้า B แตกต่างกันก่อน HTML5 หากคุณเปลี่ยนจากหน้า A เป็นหน้า B คุณต้องเปลี่ยนจากหน้า A เป็นหน้า B ในเบราว์เซอร์หรือหากคุณต้องการฟังก์ชันปุ่มย้อนกลับคุณสามารถเพิ่ม #XXXX ลงในที่อยู่ URL เพื่อรับฟังก์ชั่นด้านหลัง ตอนนี้ใน HTML5 คุณสามารถใช้การประมวลผลต่อไปนี้ผ่าน History API:

1. คำขอข้อมูล B ในหน้า A โดยส่งคำขอ AJAX

2. โหลดข้อมูลที่เกี่ยวข้องผ่าน JS ในหน้า A ไปยังตำแหน่งที่สอดคล้องกัน

3. สลับจากที่อยู่ URL ของหน้า A เป็นที่อยู่ URL ของหน้า B ในแถบที่อยู่ของเบราว์เซอร์ผ่านประวัติ API โดยไม่ต้องรีเฟรชหน้า

1. ความยาวจำนวนคำในประวัติศาสตร์ ประวัติที่ JavaScript สามารถจัดการได้นั้น จำกัด อยู่ที่ช่วงที่สามารถเข้าถึงได้โดยใช้คีย์ไปข้างหน้าและด้านหลังของเบราว์เซอร์ คุณสมบัตินี้ส่งคืนผลรวมของการนับที่อยู่ที่อยู่ภายใต้ปุ่มไปข้างหน้าสองปุ่มและด้านหลัง

1. ย้อนกลับ () กลับซึ่งเทียบเท่ากับการกดปุ่มด้านหลัง

2. ไปข้างหน้า () ไปข้างหน้าเทียบเท่ากับการกดปุ่มไปข้างหน้า

3.go () การใช้งาน: history.go (x); ไปที่ที่อยู่ที่ระบุภายในขอบเขตของประวัติศาสตร์ ถ้า x <0 จากนั้นกลับ x ที่อยู่ถ้า x> 0 จากนั้นส่งต่อ x ที่อยู่ถ้า x == 0 จากนั้นรีเฟรชหน้าที่เปิดอยู่ในขณะนี้ history.go (0) เทียบเท่ากับ location.reload ()

1. History.PushState (ข้อมูลชื่อ [, URL]): เพิ่มบันทึกลงในด้านบนของสแต็กประวัติศาสตร์ ข้อมูลจะถูกส่งผ่านเป็นพารามิเตอร์เมื่อเหตุการณ์ onpopstate ถูกทริกเกอร์; ชื่อเรื่องคือชื่อหน้าและเบราว์เซอร์ปัจจุบันทั้งหมดจะเพิกเฉยต่อพารามิเตอร์นี้ URL คือที่อยู่หน้าเว็บทางเลือกและค่าเริ่มต้นคือที่อยู่หน้าเว็บปัจจุบัน

2. ประวัติการใช้งาน (ข้อมูล, ชื่อ [, url]): เปลี่ยนประวัติปัจจุบันพารามิเตอร์จะเหมือนกับข้างต้น

3. ประวัติรัฐ: ใช้เพื่อจัดเก็บข้อมูลข้อมูลของวิธีการข้างต้น การอ่านและเขียนของเบราว์เซอร์ที่แตกต่างกันนั้นแตกต่างกัน

4. เหตุการณ์ป๊อปสเตต: เหตุการณ์นี้ถูกทริกเกอร์เมื่อผู้ใช้คลิกปุ่มย้อนกลับหรือไปข้างหน้าของเบราว์เซอร์ ค่าคุณสมบัติของรัฐของวัตถุเหตุการณ์ที่ทริกเกอร์เหตุการณ์ถูกอ่านในฟังก์ชั่นการจัดการเหตุการณ์ ค่าคุณสมบัตินี้เป็นค่าพารามิเตอร์แรกที่ใช้เมื่อดำเนินการเมธอด pushstate ซึ่งจะช่วยประหยัดวัตถุที่เพิ่มลงในประวัติเบราว์เซอร์แบบซิงโครนัส

จนถึงตอนนี้เบราว์เซอร์รองรับ API ประวัติศาสตร์ใน HTML5 โดย IE10, Firefox4 หรือสูงกว่า, Chrome 8 หรือสูงกว่า, Safari5 หรือสูงกว่า