ครั้งหนึ่งเมื่อฉันอยู่บน **. com ฉันพบว่าเอฟเฟกต์ภาพเคลื่อนไหวของการเข้าสู่ระบบและการลงทะเบียนนั้นงดงามมาก แต่สิ่งที่ทำให้ฉันตกใจคือหน้าจริงไม่สามารถกระโดดได้ ฉันทบทวนความรู้ด้านหน้าที่ฉันเรียนรู้และดูเหมือนจะไม่มีเทคโนโลยีที่จะบรรลุเป้าหมายนี้ ดังนั้นฉันจึงค้นหา Baidu และพบว่าสิ่งนี้ประสบความสำเร็จโดยใช้ API ประวัติใน HTML5
ครั้งหนึ่งเมื่อฉันอยู่ที่ **. com ฉันพบว่าเอฟเฟกต์ภาพเคลื่อนไหวของการเข้าสู่ระบบและการลงทะเบียนนั้นงดงามมาก แต่สิ่งที่ทำให้ฉันตกใจคือหน้าสามารถกระโดดได้แบบไม่ได้รีเฟรช ฉันตรวจสอบความรู้ด้านหน้าที่ฉันเรียนรู้และดูเหมือนจะไม่มีเทคโนโลยีใดที่สามารถบรรลุเป้าหมายนี้ได้ ดังนั้นฉันจึงพบว่าสิ่งนี้ประสบความสำเร็จโดยใช้ประวัติ API ใน HTML5 แต่มันไม่เคยมีประโยชน์ เทคโนโลยีนี้ไม่ได้ใช้จนกว่าบล็อกจะได้รับการแก้ไข
ใน HTML51. เพิ่มฟังก์ชั่นการเพิ่มรายการในประวัติเบราว์เซอร์ผ่าน 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 โดยไม่ต้องรีเฟรชหน้า
API ประวัติศาสตร์ใน HTML4 คุณสมบัติ1. ความยาวจำนวนคำในประวัติศาสตร์ ประวัติที่ JavaScript สามารถจัดการได้นั้น จำกัด อยู่ที่ช่วงที่สามารถเข้าถึงได้โดยใช้คีย์ไปข้างหน้าและด้านหลังของเบราว์เซอร์ คุณสมบัตินี้ส่งคืนผลรวมของการนับที่อยู่ที่อยู่ภายใต้ปุ่มไปข้างหน้าสองปุ่มและด้านหลัง
วิธี1. ย้อนกลับ () กลับซึ่งเทียบเท่ากับการกดปุ่มด้านหลัง
2. ไปข้างหน้า () ไปข้างหน้าเทียบเท่ากับการกดปุ่มไปข้างหน้า
3.go () การใช้งาน: history.go (x); ไปที่ที่อยู่ที่ระบุภายในขอบเขตของประวัติศาสตร์ ถ้า x <0 จากนั้นกลับ x ที่อยู่ถ้า x> 0 จากนั้นส่งต่อ x ที่อยู่ถ้า x == 0 จากนั้นรีเฟรชหน้าที่เปิดอยู่ในขณะนี้ history.go (0) เทียบเท่ากับ location.reload ()
API ประวัติศาสตร์ใน HTML51. History.PushState (ข้อมูลชื่อ [, URL]): เพิ่มบันทึกลงในด้านบนของสแต็กประวัติศาสตร์ ข้อมูลจะถูกส่งผ่านเป็นพารามิเตอร์เมื่อเหตุการณ์ onpopstate ถูกทริกเกอร์; ชื่อเรื่องคือชื่อหน้าและเบราว์เซอร์ปัจจุบันทั้งหมดจะเพิกเฉยต่อพารามิเตอร์นี้ URL คือที่อยู่หน้าเว็บทางเลือกและค่าเริ่มต้นคือที่อยู่หน้าเว็บปัจจุบัน
2. ประวัติการใช้งาน (ข้อมูล, ชื่อ [, url]): เปลี่ยนประวัติปัจจุบันพารามิเตอร์จะเหมือนกับข้างต้น
3. ประวัติรัฐ: ใช้เพื่อจัดเก็บข้อมูลข้อมูลของวิธีการข้างต้น การอ่านและเขียนของเบราว์เซอร์ที่แตกต่างกันนั้นแตกต่างกัน
4. เหตุการณ์ป๊อปสเตต: เหตุการณ์นี้ถูกทริกเกอร์เมื่อผู้ใช้คลิกปุ่มย้อนกลับหรือไปข้างหน้าของเบราว์เซอร์ ค่าคุณสมบัติของรัฐของวัตถุเหตุการณ์ที่ทริกเกอร์เหตุการณ์ถูกอ่านในฟังก์ชั่นการจัดการเหตุการณ์ ค่าคุณสมบัตินี้เป็นค่าพารามิเตอร์แรกที่ใช้เมื่อดำเนินการเมธอด pushstate ซึ่งจะช่วยประหยัดวัตถุที่เพิ่มลงในประวัติเบราว์เซอร์แบบซิงโครนัส
จนถึงตอนนี้เบราว์เซอร์รองรับ API ประวัติศาสตร์ใน HTML5 โดย IE10, Firefox4 หรือสูงกว่า, Chrome 8 หรือสูงกว่า, Safari5 หรือสูงกว่า
html: คัดลอกรหัส