หน้าต่างเบราว์เซอร์มีออบเจ็กต์ประวัติซึ่งใช้ในการบันทึกประวัติการเข้าชม
หากหน้าต่างปัจจุบันเข้าชม URL สามรายการ วัตถุประวัติจะมีสามรายการ และคุณสมบัติ history.length เท่ากับ 3
ออบเจ็กต์ประวัติมีชุดวิธีการที่ช่วยให้สามารถย้ายระหว่างประวัติการเข้าชมได้:
window.history.back(): ย้ายไปยังหน้าที่เยี่ยมชมก่อนหน้าซึ่งเทียบเท่ากับปุ่มย้อนกลับของเบราว์เซอร์
window.history.forward(): ย้ายไปยังหน้าที่เยี่ยมชมถัดไปซึ่งเทียบเท่ากับปุ่มไปข้างหน้าของเบราว์เซอร์
window.history.go(num): ยอมรับจำนวนเต็มเป็นพารามิเตอร์และย้ายไปยังหน้าที่ระบุด้วยจำนวนเต็ม ตัวอย่างเช่น go(1) เทียบเท่ากับการส่งต่อ() และ go(-1) เทียบเท่ากับย้อนกลับ( ).
window.history.pushState(): HTML5 เพิ่มสองวิธีใหม่ให้กับวัตถุประวัติ ได้แก่ window.history.pushState() และ window.history.replaceState() ซึ่งใช้เพื่อเพิ่มและแก้ไขบันทึกในประวัติการเรียกดู
หมายเหตุ: 1. หากตำแหน่งที่ย้ายเกินขอบเขตของประวัติการเข้าถึง วิธีการทั้งสามข้างต้นจะไม่รายงานข้อผิดพลาด แต่จะล้มเหลวโดยไม่โต้ตอบ
2. เมื่อตั้งค่า เพจมักจะโหลดจากแคชของเบราว์เซอร์ แทนที่จะขอให้เซิร์ฟเวอร์ส่งหน้าเว็บใหม่อีกครั้ง
มาเน้นที่: window.history.pushState()window.history.pushState(state, title, utl) สร้างเอนทิตีประวัติในหน้า เพิ่มโดยตรงไปยังประวัติศาสตร์
ท่ามกลางพารามิเตอร์:
สถานะ: วัตถุสถานะที่เกี่ยวข้องกับ URL ที่ระบุ เมื่อมีการทริกเกอร์เหตุการณ์ popstate วัตถุนี้จะถูกส่งผ่านไปยังฟังก์ชันการโทรกลับ หากไม่ต้องการวัตถุนี้ สามารถกรอกค่าว่างได้ที่นี่
title: ชื่อเรื่องของหน้าใหม่ แต่ขณะนี้เบราว์เซอร์ทั้งหมดเพิกเฉยต่อค่านี้ ดังนั้นจึงสามารถกรอกค่าว่างได้ที่นี่
url: URL ใหม่จะต้องอยู่ในโดเมนเดียวกันกับหน้าปัจจุบัน แถบที่อยู่ของเบราว์เซอร์ของคุณจะแสดง URL นี้
หมายเหตุ: เมธอด pushState จะไม่ทริกเกอร์การรีเฟรชเพจ แต่จะทำให้ออบเจ็กต์ประวัติเปลี่ยนแปลง และแถบที่อยู่จะตอบสนอง
ตัวอย่างการใช้งาน:Html5 ฟังและสกัดกั้นวิธีการส่งคืนคีย์ของ Android ดังต่อไปนี้:
1. ฟังกิจกรรม popstate
window.addEventListener (popstate, ฟังก์ชั่น () { // doSomething}, false)2. ยกเลิกการดำเนินการส่งคืนเริ่มต้น นั่นคือ ฟังเพื่อสกัดกั้นคีย์ส่งคืน: เพิ่มเอนทิตีประวัติที่ว่างเปล่าเพื่อแทนที่เอนทิตีประวัติดั้งเดิม
window.history.pushState (null, null, #);
ตัวอย่าง:
<!DOCTYPE html><html> <meta name=viewport content=width=device-width> <script type=text/javascript> var count = 0; window.history.pushState(null, null, #); window.addEventListener (popstate, function(e) { window.history.pushState(null, null, #); document.getElementById('logView').innerHTML = ผู้ใช้คลิกส่งคืน + (++นับ) }) </script><body> <p id=logView>ทดสอบ</p></body></html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network