Window.history แสดงถึงบันทึกประวัติศาสตร์ของวัตถุหน้าต่างซึ่งสร้างขึ้นโดยผู้ใช้และยอมรับวัตถุส่วนกลางที่ควบคุมโดยสคริปต์ JavaScript วัตถุหน้าต่างให้การเข้าถึงบันทึกประวัติศาสตร์ของผู้พูดผ่านวัตถุประวัติศาสตร์ มันเปิดเผยวิธีการและคุณลักษณะที่มีประโยชน์มากช่วยให้คุณสามารถก้าวไปข้างหน้าและล่าถอยได้อย่างอิสระในบันทึกทางประวัติศาสตร์
1. การส่งต่อและย้อนหลังของบันทึกทางประวัติศาสตร์ล่าถอยในบันทึกประวัติศาสตร์คุณสามารถทำได้:
window.history.back ();
นี่เป็นเหมือนผู้ใช้คลิกปุ่มย้อนกลับของเบราว์เซอร์
ในทำนองเดียวกันคุณสามารถก้าวไปข้างหน้าเช่นเดียวกับการคลิกที่ปุ่มไปข้างหน้าในเบราว์เซอร์เช่นนี้:
window.history.forward ();2. ย้ายไปยังบันทึกทางประวัติศาสตร์ที่กำหนด
โดยการระบุค่าเมื่อเทียบกับตำแหน่งหน้าปัจจุบันคุณสามารถใช้วิธี GO () เพื่อโหลดหน้าเว็บจากบันทึกประวัติของเซสชันปัจจุบัน (ค่าดัชนีตำแหน่งหน้าปัจจุบันคือ 0 หน้าก่อนหน้าคือ -1 และ หน้าถัดไปคือ 1)
เพื่อล่าถอยหน้าหนึ่ง (เทียบเท่ากับการโทร ()) :):
window.history.go (-1);
เลื่อนหน้าหนึ่งไปข้างหน้า (เทียบเท่ากับการโทรไปข้างหน้า ()):
window.history.go (1);
ที่คล้ายกันพารามิเตอร์ PASS 2 คุณสามารถเลื่อนไปข้างหน้า 2 คะแนนบันทึก คุณสามารถดูค่าแอตทริบิวต์ความยาวและจำนวนคะแนนบันทึกในสแต็กบันทึกประวัติศาสตร์:
window.history.length;2. แก้ไขจุดบันทึกประวัติศาสตร์
API ใหม่ของ HTML5 ได้ขยายหน้าต่างประวัติศาสตร์ทำให้จุดบันทึกประวัติศาสตร์เปิดกว้างขึ้น คุณสามารถจัดเก็บบันทึกประวัติศาสตร์ปัจจุบันแทนที่บันทึกประวัติศาสตร์ปัจจุบันและตรวจสอบจุดบันทึกประวัติศาสตร์
1. เก็บจุดบันทึกประวัติศาสตร์ปัจจุบันวิธีที่เก็บไว้นั้นคล้ายกับอาร์เรย์ของสแต็ก (array.push ()) และมีการเพิ่มจุดบันทึกประวัติศาสตร์ใหม่ลงในหน้าต่างประวัติศาสตร์เช่น ::
// URL ปัจจุบันคือ: http://qianduanblog.com/index.htmlvar json = {เวลา: วันที่ใหม่ () เบราว์เซอร์ไม่ได้ตรวจสอบว่า URL มีอยู่ แต่เฉพาะ URL เท่านั้นหลังจากดำเนินการวิธีการ pushstate แล้วที่อยู่ URL ของหน้าคือ http://qianduanblog.com/post -html
2. แทนที่จุดบันทึกประวัติศาสตร์ปัจจุบันwindow.history.replacestate คล้ายกับ window.history.pushstate เพิ่มเข้าไปในจุดบันทึก เมื่อคุณต้องการอัปเดตวัตถุสถานะหรือ URL ของรายการบันทึกประวัติปัจจุบันในการตอบสนองต่อการดำเนินการบางอย่างของผู้ใช้โดยใช้วิธีการแทนที่ () มีความเหมาะสมอย่างยิ่ง
3. จุดบันทึกการเฝ้าระวังทางประวัติศาสตร์จุดบันทึกประวัติศาสตร์ของการตรวจสอบที่ใช้งานง่ายสามารถพิจารณาว่าเป็นการเปลี่ยนแปลงของ URL แต่มันจะไม่สนใจส่วนแฮชของ URL ฟังส่วนแฮชของ URL, HTML5 มี API ใหม่เป็น OnhashChange วิธีการนี้และข้ามเบราว์เซอร์ในบล็อกของฉันยังได้รับการกล่าวถึงวิธีการนี้และ Crossbrowler คุณสามารถฟังการเปลี่ยนแปลงของ URL ผ่าน window.onpopstate และคุณสามารถรับวัตถุสถานะที่เก็บไว้ที่จุดบันทึกประวัติศาสตร์ซึ่งเป็นวัตถุ JSON ที่กล่าวถึงข้างต้นเช่น:
// URL ปัจจุบันคือ: http://qianduanblog.com/post -htmlwindow.onpopstate = function () {// รับวัตถุ JSON ที่เก็บไว้ที่จุดบันทึกประวัติศาสตร์ var json = window.history.state; กลับไปที่: http://qianduanblog.com/index.html // json ที่ได้รับคือ null // อีกครั้งเป็นที่น่าสังเกตว่า: สคริปต์ JavaScript ดำเนินการ window.history.pushstate และ window.history.replacestate ไม่ได้กระตุ้นเหตุการณ์ onpopstate
นอกจากนี้ยังเป็นสิ่งสำคัญที่จะต้องทราบว่าปฏิกิริยาของเบราว์เซอร์และเบราว์เซอร์ Firefox ในหน้าเป็นครั้งแรกนั้นแตกต่างกันไป
ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับการดำเนินการ pushstate และ popstate ของ HTML5 เวลา. ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!