บทความนี้ส่วนใหญ่แนะนำการสำรวจเชิงลึกของ HTML5 History API และมุ่งเน้นไปที่ History Methods.pushstate () และ History.replacestate () ใน HTML5 เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
ประวัติศาสตร์สนุกใช่มั้ย ในรุ่น HTML ก่อนหน้านี้เรามีการดำเนินงานที่ จำกัด มากเกี่ยวกับประวัติการเรียกดู เราสามารถใช้วิธีการที่เราสามารถใช้ไปมาได้ แต่นั่นคือทุกสิ่งที่เราทำได้
อย่างไรก็ตามการใช้ HTML 5 History API เราสามารถควบคุมประวัติของเบราว์เซอร์ได้ดีขึ้น ตัวอย่างเช่น: เราสามารถเพิ่มบันทึกลงในรายการประวัติหรืออัปเดต URL ของแถบที่อยู่เมื่อไม่ได้รีเฟรช
ทำไมต้องแนะนำ API ประวัติศาสตร์?
ในบทความนี้เราจะได้เรียนรู้เกี่ยวกับที่มาของประวัติศาสตร์ API ใน HTML 5 ก่อนหน้านี้เรามักจะใช้ค่าแฮชเพื่อเปลี่ยนเนื้อหาหน้าโดยเฉพาะอย่างยิ่งที่มีความสำคัญอย่างยิ่งต่อหน้า เนื่องจากไม่ได้รีเฟรชจึงเป็นไปไม่ได้ที่จะเปลี่ยน URL สำหรับแอปพลิเคชันหน้าเดียว นอกจากนี้เมื่อคุณเปลี่ยนค่าแฮชของ URL จะไม่มีผลต่อประวัติของเบราว์เซอร์
จากนั้นสำหรับ HTML History API History API สิ่งเหล่านี้ใช้งานง่าย แต่เนื่องจากแอปพลิเคชันหน้าเดียวไม่จำเป็นต้องใช้ค่าแฮชจึงอาจต้องใช้สคริปต์การพัฒนาเพิ่มเติม นอกจากนี้ยังช่วยให้เราสามารถสร้างแอปพลิเคชันใหม่ในแบบที่เป็นมิตรกับ SEO นอกจากนี้ยังสามารถลดแบนด์วิดท์ได้ แต่จะพิสูจน์ได้อย่างไร?
ในบทความฉันจะใช้ประวัติ API เพื่อพัฒนาแอปพลิเคชันหน้าเดียวเพื่อพิสูจน์ปัญหาข้างต้น
นี่ก็หมายความว่าฉันต้องโหลดทรัพยากรที่จำเป็นในหน้าแรกก่อน ตอนนี้เริ่มต้นหน้าโหลดเฉพาะเนื้อหาที่คุณต้องการ กล่าวอีกนัยหนึ่งแอปพลิเคชันไม่โหลดเนื้อหาทั้งหมดในตอนต้นและจะโหลดเฉพาะเมื่อขอเนื้อหาแอปพลิเคชันที่สองเท่านั้น
โปรดทราบว่าคุณต้องทำการเข้ารหัสฝั่งเซิร์ฟเวอร์เพื่อให้ทรัพยากรเพียงบางส่วนเท่านั้นไม่ใช่เนื้อหาหน้าเว็บที่สมบูรณ์
การสนับสนุนเบราว์เซอร์เมื่อเขียนบทความนี้การสนับสนุน History API โดย Major Browsers นั้นดีมาก คุณสามารถคลิกที่นี่เพื่อดูการสนับสนุนของพวกเขา ลิงค์นี้จะบอกเบราว์เซอร์ที่รองรับและก่อนที่จะใช้งานมีแนวทางปฏิบัติที่ดีเสมอในการตรวจจับฟังก์ชั่นที่รองรับเฉพาะ
เพื่อตรวจสอบว่าเบราว์เซอร์รองรับ API นี้ในทางใดทางหนึ่งคุณสามารถใช้รหัสบรรทัดต่อไปนี้เพื่อตรวจสอบ:
XML/HTML รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด