ฟังก์ชั่นนี้ได้รับการอธิบายสั้น ๆ มาก่อน เวลานี้เราจะอธิบายหลักการและปัญหาที่มีอยู่ในรายละเอียด (เนื่องจากใช้ API ใหม่ของ HTML5 จึงมีปัญหาความเข้ากันได้ดังนั้นจึงขอแนะนำให้เทอร์มินัลมือถือใช้วิธีนี้)
ฟังก์ชั่นคำอธิบาย:
สร้างหน้าแท็บใหม่ในเบราว์เซอร์และระบุ URL หลังจากโหลดหน้าเว็บแล้วการคลิกจะไม่ได้รับอนุญาตให้ส่งคืนภายใต้กระบวนการปกติ เนื่องจากไม่มีประวัติที่เกี่ยวข้องของหน้าแท็บปัจจุบันจึงไม่สามารถส่งคืนบันทึกได้
ในการตอบสนองต่อคำขอของลูกค้าในกรณีนี้ให้เพิ่มลิงค์ (เช่นหน้าแรก) ไปยังบันทึกประวัติของเขาดังนั้นในหน้าใหม่ที่เปิดใหม่คลิกเพื่อส่งคืนคุณสามารถข้ามไปที่หน้าแรกช่วยให้ผู้ใช้เห็นฟังก์ชั่นต่าง ๆ ของระบบและส่งเสริมแพลตฟอร์ม
1. ประเด็นสำคัญของความรู้
HTML5 แนะนำวิธี History.PushState () วิธีการและประวัติ Replacestate () ซึ่งช่วยให้คุณสามารถเพิ่มและแก้ไขรายการประวัติรายการตามรายการ วิธีการเหล่านี้สามารถทำงานร่วมกับเหตุการณ์ Window.onpopstate
กรณี:
สมมติว่า http://mozilla.org/foo.html จะเรียกใช้รหัส JavaScript ต่อไปนี้:
การคัดลอกรหัสมีดังนี้: 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 และหน้าจะเรียกเหตุการณ์ป๊อปสเตท วัตถุสถานะในเหตุการณ์มีสำเนาของ StateObj หน้าดูเหมือน foo.html แม้ว่าเนื้อหาหน้าอาจจะถูกแก้ไขในเหตุการณ์ป๊อปสเตต
หากเราคลิกปุ่มย้อนกลับอีกครั้ง URL จะเปลี่ยนกลับไปเป็นเอกสาร http://mozilla.org/foo.html เพื่อทริกเกอร์เหตุการณ์ป๊อปสเตตอื่นคราวนี้วัตถุสถานะเป็นโมฆะ ทางเลือกจะไม่เปลี่ยนเนื้อหาของเอกสาร
วิธีการ pushstate ()
pushstate () มีสามพารามิเตอร์: วัตถุสถานะชื่อ (ซึ่งจะถูกละเว้นในขณะนี้) และที่อยู่ URL เสริม มาตรวจสอบรายละเอียดของพารามิเตอร์ทั้งสามนี้แยกกัน:
วัตถุสถานะ - วัตถุ JavaScript ที่เกี่ยวข้องกับรายการประวัติใหม่ที่สร้างขึ้นด้วยวิธี pushstate () เมื่อใดก็ตามที่ผู้ใช้นำทางไปยังสถานะที่สร้างขึ้นใหม่เหตุการณ์ป๊อปสเตตจะถูกเรียกใช้และคุณสมบัติสถานะของวัตถุเหตุการณ์มีสำเนาของวัตถุสถานะของรายการประวัติ
วัตถุอนุกรมใด ๆ สามารถถือว่าเป็นวัตถุสถานะ เนื่องจากเบราว์เซอร์ Firefox บันทึกวัตถุสถานะไปยังฮาร์ดดิสก์ของผู้ใช้เพื่อให้สามารถกู้คืนได้หลังจากผู้ใช้รีสตาร์ทเบราว์เซอร์เราจึง จำกัด ขนาดของวัตถุสถานะเป็น 640K หากคุณผ่านวัตถุสถานะเกินขีด จำกัด นี้ไปยังวิธี pushstate () วิธีการจะโยนข้อยกเว้น หากคุณต้องการจัดเก็บข้อมูลจำนวนมากขอแนะนำให้ใช้ SessionStorage หรือ LocalStorage
ชื่อเรื่อง - เบราว์เซอร์ Firefox จะละเว้นพารามิเตอร์นี้แม้ว่ามันอาจจะใช้ในอนาคต เมื่อพิจารณาว่าวิธีนี้อาจได้รับการแก้ไขในอนาคตมันจะปลอดภัยกว่าที่จะผ่านสตริงเปล่า อีกทางเลือกหนึ่งคุณสามารถผ่านชื่อสั้น ๆ ที่ระบุสถานะที่คุณกำลังจะเข้าร่วม
ที่อยู่ (URL) - ที่อยู่ของรายการประวัติใหม่ เบราว์เซอร์ไม่ได้โหลดที่อยู่หลังจากเรียกเมธอด pushstate () แต่หลังจากนั้นอาจพยายามโหลดเช่นผู้ใช้รีสตาร์ทเบราว์เซอร์ URL ใหม่ไม่จำเป็นต้องเป็นเส้นทางที่แน่นอน หากเป็นเส้นทางที่สัมพันธ์กันมันจะขึ้นอยู่กับ URL ปัจจุบัน URL ที่ผ่านควรจะเหมือนกับ URL ปัจจุบันมิฉะนั้น pushstate () จะโยนข้อยกเว้น พารามิเตอร์นี้เป็นทางเลือก หากไม่ได้ระบุไว้จะเป็น URL ปัจจุบันของเอกสาร
หมายเหตุ: ใน Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / Seamonkey 2.1) ถึง Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / Seamonkey 2.2) วัตถุที่ผ่านมาจะถูกทำให้เป็นอนุกรมโดยใช้ JSON เริ่มต้นด้วย Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / Seamonkey 2.3) วัตถุจะถูกทำให้เป็นอนุกรมโดยใช้อัลกอริทึมการคัดลอกที่มีโครงสร้าง สิ่งนี้จะช่วยให้วัตถุประเภทอื่น ๆ ถูกส่งผ่านอย่างปลอดภัย
ในแง่หนึ่งการเรียก pushstate () ค่อนข้างคล้ายกับการตั้งค่า window.location = '#foo' และพวกเขาทั้งหมดสร้างและเปิดใช้งานรายการประวัติใหม่ภายในเอกสารปัจจุบัน แต่ pushstate () มีข้อได้เปรียบของตัวเอง:
1. URL ใหม่สามารถเป็น URL ที่คล้ายคลึงกันได้ ในทางตรงกันข้ามเมื่อใช้วิธีการตั้งค่า Window. การแก้ไขแฮชเท่านั้นสามารถตรวจสอบให้แน่ใจว่าอยู่ในเอกสารเดียวกัน
2. ตัดสินใจว่าจะแก้ไข URL ตามความต้องการส่วนบุคคลของคุณหรือไม่ ให้ตั้งค่า window.location = '#foo' แทนและสร้างประวัติใหม่เฉพาะในกรณีที่ค่าแฮชปัจจุบันไม่ใช่ foo
3. คุณสามารถเพิ่มข้อมูลนามธรรมลงในรายการประวัติใหม่ หากคุณใช้วิธีการแฮชที่ใช้คุณสามารถแปลงรหัสข้อมูลที่เกี่ยวข้องเป็นสตริงสั้น ๆ เท่านั้น
โปรดทราบว่าวิธีการ pushstate () จะไม่กระตุ้นเหตุการณ์ hashchange แม้ว่าที่อยู่ใหม่จะเปลี่ยนแฮชเท่านั้น
เหตุการณ์ป๊อปสเตท
เหตุการณ์ป๊อปสเตตจะถูกทริกเกอร์เมื่อใดก็ตามที่ประวัติเปิดใช้งานการเปลี่ยนแปลง หากรายการประวัติที่เปิดใช้งานถูกสร้างขึ้นโดย pushstate หรือได้รับผลกระทบจากวิธีการแทนที่แอตทริบิวต์สถานะของเหตุการณ์ป๊อปสเตตจะมีสำเนาของวัตถุสถานะประวัติ
วิธีการแทนที่ ()
การดำเนินการ history.replacestate () คล้ายกับ history.pushstate () ยกเว้นว่าเมธอด replacestate () จะแก้ไขรายการประวัติปัจจุบันแทนการสร้างรายการใหม่
เมื่อคุณต้องการอัปเดตวัตถุสถานะหรือ URL ของรายการประวัติปัจจุบันเพื่อตอบสนองต่อการกระทำบางอย่างโดยผู้ใช้โดยใช้วิธีการแทนที่ () นั้นเหมาะสมอย่างยิ่ง
2. แนวคิดการใช้งาน
1. ใช้เหตุการณ์ป๊อปสเตตเพื่อฟังเหตุการณ์คลิกและส่งคืน
2. เมื่อเหตุการณ์ถูกเรียกใช้ให้ตรวจสอบว่ามีหน้าเพื่อส่งคืนประวัติของหน้าปัจจุบันหรือไม่
3. หากไม่มีหน้าเว็บที่สามารถส่งคืนได้จะมีการแทรกสองระเบียน:
1) หน้ากระโดดที่ระบุ
2) บันทึกที่ว่างเปล่า (ทำให้หน้าปัจจุบันไม่เปลี่ยนแปลง)
วิธีการดำเนินการ
// กลับไปที่หน้าแรกโดยไม่มีหน้าก่อนที่จะส่งคืนฟังก์ชัน pushhistory () {ถ้า (history.length <2) {var state = {title: "index", url: gethttpprefix + "index.html"}; window.history.pushstate (สถานะ, "ดัชนี", location.href); state = {title: "index", url: ""}; window.history.pushstate (สถานะ, "ดัชนี", ""); } //lll("history.state " + history.state) //console.log(history.state)}กำหนดจำนวนระเบียนในประวัติปัจจุบัน เนื่องจากเบราว์เซอร์จะกดบันทึกโดยอัตโนมัติเมื่อโหลดหน้าเว็บ ดังนั้นเราต้องพิจารณาว่าความยาวน้อยกว่า 2
วัตถุของรัฐที่ยัดเข้าไปคือเพื่อรับลิงค์ URL ที่สอดคล้องกัน
บันทึก:
ฉันใส่ URL กระโดดลงในวัตถุสถานะสำหรับการผลักดันครั้งแรกเพื่ออำนวยความสะดวกในการดำเนินการกระโดด พารามิเตอร์ที่สองไม่มีนัยสำคัญในทางปฏิบัติเนื่องจากเบราว์เซอร์ปัจจุบันไม่ได้ใช้พารามิเตอร์นี้
พารามิเตอร์ที่สามจะแทนที่ลิงก์ในแถบที่อยู่ปัจจุบัน แต่หน้าจะไม่กระโดด (ฉันทำผิดพลาดมาก่อนการตั้งค่าพารามิเตอร์ที่สามไปยังลิงค์หน้าแรกซึ่งทำให้แถบที่อยู่เปลี่ยนเป็นลิงค์หน้าแรกเพื่อให้ลิงก์ในหน้าปัจจุบันถูกเปลี่ยนเส้นทางตามหน้าแรกทำให้เกิดข้อผิดพลาดของลิงก์ทั้งหมดบนหน้าเว็บที่ถูกเปลี่ยนเส้นทาง)
settimeout (function () {pushhistory () window.addeventListener ("popstate", ฟังก์ชั่น (e) {lll ("popstate"+window.history.state) ถ้า (window.history.state!รหัสนี้ถูกวางไว้ในเหตุการณ์พร้อมของหน้าโดยมีความล่าช้า 300 มิลลิวินาทีเพื่อล่าช้าในการดำเนินการและป้องกันความขัดแย้งกับเหตุการณ์ป๊อประบบ
เพื่อตรวจสอบว่าประวัติศาสตร์มีวัตถุสถานะมีเพียงบันทึกที่ตรงตามข้อกำหนดของเราจะมีวัตถุสถานะที่เราเพิ่มไว้หรือไม่ดังนั้นการดำเนินการกระโดดหน้าสามารถทำได้ตามจุดนี้
สิ่งนี้จะบรรลุผลที่เราต้องการ
4. เขียนในตอนท้าย
ข้อบกพร่อง:
1. เห็นได้ชัดว่าตามที่กล่าวไว้ในตอนแรก เหมาะสำหรับเบราว์เซอร์ที่รองรับ HTML5 เท่านั้น
2. เนื่องจากมีการแทรกสองระเบียนการส่งคืนของเทอร์มินัลมือถืออย่าง WeChat ต้องใช้สองคลิกเพื่อส่งคืนก่อนที่จะเปิดตัวหน้าและกลับไปที่หน้าต่างแชท WeChat ซึ่งมีประสบการณ์ผู้ใช้ที่ไม่ดี
สรุป:
วิธีนี้สามารถปรับให้เหมาะสมและปรับปรุงได้อย่างแน่นอน แต่ความแข็งแกร่งของฉันไม่เพียงพอที่จะทำให้ระดับความสมบูรณ์แบบสมบูรณ์แบบ
ฉันหวังว่าเพื่อนที่อ่านบทความนี้จะได้รับแรงบันดาลใจหรือมีวิธีที่ดีกว่าในการบรรลุเป้าหมาย