เรามาพูดคุยสั้นๆ เกี่ยวกับการใช้งาน pushState และ replacementState ใน H5 กัน

HTML5 แนะนำเมธอด history.pushState() และ history.replaceState() ซึ่งสามารถเพิ่มและแก้ไขรายการประวัติตามลำดับ โดยทั่วไปวิธีการเหล่านี้จะใช้ร่วมกับ window.onpopstate

สมมติว่าโค้ด JavaScript ต่อไปนี้ถูกเรียกใช้งานใน http://mozilla.org/foo.html:

 var stateObj = { foo: bar };history.pushState(stateObj, หน้า 2, bar.html);

ซึ่งจะทำให้แถบที่อยู่ของเบราว์เซอร์อ่าน http://mozilla.org/bar.html แต่จะไม่ทำให้เบราว์เซอร์โหลด bar.html หรือแม้แต่ตรวจสอบว่ามี bar.html อยู่หรือไม่

สมมติว่าตอนนี้ผู้ใช้ไปที่ http://google.com และคลิกปุ่มย้อนกลับ ในขณะนี้ แถบที่อยู่จะแสดง http://mozilla.org/bar.html และเพจจะทริกเกอร์เหตุการณ์ popstate สถานะของออบเจ็กต์เหตุการณ์มีสำเนาของ stateObj ตัวหน้าเองก็เหมือนกับ foo.html แม้ว่าเนื้อหาอาจมีการแก้ไขในเหตุการณ์ popstate ก็ตาม

หากเราคลิกปุ่มย้อนกลับอีกครั้ง URL ของเพจจะเปลี่ยนเป็น http://mozilla.org/foo.html และเอกสารออบเจ็กต์เอกสารจะทริกเกอร์เหตุการณ์ popstate อื่น คราวนี้ออบเจ็กต์สถานะออบเจ็กต์เหตุการณ์เป็นโมฆะ เช่นเดียวกัน การส่งคืนจะไม่เปลี่ยนแปลงเนื้อหาของเอกสาร แม้ว่าเอกสารอาจเปลี่ยนแปลงเนื้อหาเมื่อได้รับเหตุการณ์ popstate แต่เนื้อหาจะยังคงสอดคล้องกับการนำเสนอครั้งก่อน

pushState() ต้องใช้พารามิเตอร์สามตัว ได้แก่ state object, title (ปัจจุบันถูกละเว้น) และ (ไม่บังคับ) URL มาอธิบายพารามิเตอร์ทั้งสามนี้โดยละเอียด:

วัตถุสถานะ — สถานะของวัตถุสถานะเป็นวัตถุ JavaScript ที่สร้างรายการประวัติใหม่ผ่าน pushState() เมื่อใดก็ตามที่ผู้ใช้นำทางไปยังสถานะใหม่ เหตุการณ์ popstate จะเริ่มทำงาน และคุณสมบัติสถานะของเหตุการณ์จะมีสำเนาของอ็อบเจ็กต์สถานะของรายการประวัติ

title — ขณะนี้พารามิเตอร์นี้ถูกละเว้น แต่อาจใช้ในอนาคตได้ การส่งสตริงว่างนั้นปลอดภัยที่นี่ แต่จะไม่ปลอดภัยในอนาคต หรือคุณสามารถส่งชื่อเรื่องสั้นสำหรับสถานะการข้ามได้

URL — พารามิเตอร์นี้กำหนดเรกคอร์ด URL ประวัติใหม่ โปรดทราบว่าเบราว์เซอร์จะไม่โหลด URL นี้ทันทีหลังจากเรียก pushState() แต่อาจโหลด URL นี้ในบางกรณีในภายหลัง เช่น เมื่อผู้ใช้เปิดเบราว์เซอร์อีกครั้ง URL ใหม่ไม่จำเป็นต้องเป็นเส้นทางที่แน่นอน หาก URL ใหม่เป็นเส้นทางสัมพัทธ์ ระบบจะถือว่า URL นั้นสัมพันธ์กับ URL ปัจจุบัน URL ใหม่จะต้องมีต้นกำเนิดเดียวกันกับ URL ปัจจุบัน มิฉะนั้น pushState() จะส่งข้อยกเว้น พารามิเตอร์นี้เป็นทางเลือกและมีค่าเริ่มต้นเป็น URL ปัจจุบัน

ในแง่หนึ่ง การเรียก pushState() คล้ายกับการตั้งค่า window.location = #foo ทั้งคู่จะสร้างและเปิดใช้งานบันทึกประวัติใหม่บนหน้าปัจจุบัน แต่ pushState() มีข้อดีดังต่อไปนี้:

URL ใหม่อาจเป็น URL ใดก็ได้ที่มีต้นกำเนิดเดียวกันกับ URL ปัจจุบัน และการตั้งค่า window.location จะเก็บไฟล์เดียวกันไว้เฉพาะเมื่อคุณแก้ไขค่าแฮชเท่านั้น

หากต้องการ คุณสามารถสร้างบันทึกประวัติได้โดยไม่ต้องเปลี่ยน URL โดยการตั้งค่า window.location = #foo; รายการประวัติใหม่จะถูกสร้างขึ้นก็ต่อเมื่อแฮชปัจจุบันไม่ใช่ #foo

เราสามารถเชื่อมโยงข้อมูลโดยพลการกับรายการประวัติใหม่ได้ ด้วยวิธีการตามค่าแฮช ข้อมูลที่เกี่ยวข้องทั้งหมดจะต้องถูกเข้ารหัสเป็นสตริงแบบสั้น

การใช้ history.replaceState() นั้นคล้ายคลึงกับ history.pushState() มาก ความแตกต่างก็คือการแทนที่ State() จะแก้ไขรายการประวัติปัจจุบันแทนที่จะสร้างรายการใหม่

เมื่อใดก็ตามที่รายการประวัติที่ใช้งานเปลี่ยนแปลง เหตุการณ์ popstate จะถูกทริกเกอร์บนวัตถุหน้าต่างที่เกี่ยวข้อง หากรายการประวัติที่ใช้งานอยู่ในปัจจุบันถูกสร้างขึ้นโดยเมธอด history.pushState() หรือแก้ไขโดยเมธอด history.replaceState() คุณสมบัติสถานะของออบเจ็กต์เหตุการณ์ popstate จะมีสำเนาของออบเจ็กต์สถานะของรายการประวัติ

เรายังสามารถรับสถานะได้โดยตรงบนออบเจ็กต์ประวัติศาสตร์ ดังนี้:

 var currentState = history.state;

ควรสังเกตว่าการโทร history.pushState() หรือ history.replaceState() จะไม่ทำให้เกิดเหตุการณ์ popstate เหตุการณ์ opstate จะถูกทริกเกอร์ภายใต้การกระทำบางอย่างของเบราว์เซอร์เท่านั้น เช่น การคลิกปุ่มย้อนกลับและไปข้างหน้า (หรือการเรียกเมธอด history.back(), history.forward() และ history.go() ใน JavaScript)

หากที่อยู่หน้าเว็บปัจจุบันคือ http://example.com/example.html ให้เรียกใช้โค้ดต่อไปนี้:

 window.onpopstate = function(event) { alert(location: + document.location + , state: + JSON.stringify(event.state));};//ผูกฟังก์ชันการประมวลผลเหตุการณ์ history.pushState ({หน้า: 1 } , title 1, ?page=1); //เพิ่มและเปิดใช้งานรายการประวัติ http://example.com/example.html?page=1 ดัชนีรายการคือ 1history.pushState({page: 2}, title 2, ?page=2); //เพิ่มและเปิดใช้งานรายการประวัติ http://example.com/example.html?page=2 ดัชนีรายการคือ 2history.replaceState({page: 3}, title 3, ? page=3); //แก้ไขรายการประวัติที่เปิดใช้งานในปัจจุบัน http://ex..?page=2 เป็น http://ex..?page=3 และดัชนีรายการคือ 3history.back(); ตำแหน่งป๊อปอัป: http://example.com/example.html?page=1 สถานะ: {page:1}history.back(); // ตำแหน่งป๊อปอัป: http://example.com/example.html สถานะ: nullhistory.go(2); // ตำแหน่งป๊อปอัป: http://example.com/example.html?page=3 สถานะ: {page:3}

Wang Er ใช้ pushState() เป็นหลักเนื่องจากสามารถตรวจสอบเหตุการณ์การส่งคืนบนเบราว์เซอร์ได้ นอกจากนี้ยังใช้ได้กับเทอร์มินัลมือถืออีกด้วย โปรดดูโค้ดต่อไปนี้ (สามารถเรียกใช้ได้โดยตรง):

 <body> <div>window.onpopstate สามารถตรวจสอบเหตุการณ์การส่งคืนคีย์ได้</div> <script> history.pushState({}, ); window.onpopstate = function(event) { //ที่นี่คุณสามารถตรวจสอบเหตุการณ์การส่งคืนของเบราว์เซอร์ได้ และทำสิ่งที่คุณต้องการทำ //ตัวอย่าง: ข้ามไปยังตำแหน่งหน้าเว็บอื่น.href = https://www.baidu.com };

แน่นอน คุณยังสามารถใช้ window.onhashchange เพื่อตรวจสอบเหตุการณ์การส่งคืนบนเบราว์เซอร์ได้ โปรดดูโค้ดต่อไปนี้ (สามารถเรียกใช้ได้โดยตรง):

 <body> <div>window.onhashchange สามารถตรวจสอบเหตุการณ์คีย์ส่งคืนได้</div> <script> setTimeout(()=>{ location.hash=a },100); setTimeout(()=>{ window.onhashchange = ฟังก์ชั่น (เหตุการณ์) { location.href = https://www.baidu.com; } },200);

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network