เห็นชื่อนี้แล้วอาจจะคิดว่านี่มันเรื่องอะไรกัน? จริงๆ แล้วสิ่งที่ผมอยากจะพูดก็คือ ดูบันทึกข้างล่างนี้:
การโต้ตอบประเภทนี้เป็นเรื่องปกติในหน้า H5 คลิกที่เมือง -> ป็อปอัพเลเยอร์การเลือกเมืองแบบลอย -> กดปุ่มย้อนกลับเพื่อปิดเลเยอร์แบบลอย
การดำเนินการเหล่านี้สามารถทำได้โดยไม่ต้องคลิกปุ่มปิดที่มุมซ้ายบน/มุมขวาบน H5 ของ Fliggy มีเลเยอร์ป๊อปอัปเมื่อก้าวไปข้างหน้า และเลเยอร์ป๊อปอัปจะปิดลงเมื่อกลับมา ซึ่งใช้ไม่ได้กับบริษัทอื่น ( ตั๋วเครื่องบิน Qunar.com H5 โรงแรม Meituan H5)
เหตุใดจึงได้รับการออกแบบเช่นนี้?เนื่องจาก H5 ทำงานบนโทรศัพท์มือถือ พื้นที่ครอบคลุมของพื้นที่ที่ใช้นิ้วได้บนโทรศัพท์มือถือจึงมีขนาดเล็กมาก ไม่ต้องพูดถึงพื้นที่เสีย (ยกเลิก/ปิด) ที่มุมซ้ายบน/มุมขวาบน คุณคงไม่เคยได้ยินการกระทำนี้: แตะเพื่อย้อนกลับ สะดวกและเป็นมิตรสำหรับผู้ใช้ในการดำเนินการ หลังจากเลือกเมืองแล้ว ไม่จำเป็นต้องคลิกยกเลิก เพียงคลิก Return ซึ่งนิ้วหัวแม่มือสามารถดำเนินการเพื่อปิดเลเยอร์ป๊อปอัป
วิธีการบรรลุผลเนื่องจากมีความต้องการที่ดีมาก ในฐานะนักพัฒนา คุณจะต้องพยายามอย่างเต็มที่เพื่อนำฟังก์ชันนี้ไปใช้ คุณไม่จำเป็นต้องใช้ Google ด้วยซ้ำ คุณควรคิดวิธีการต่างๆ ได้ เช่น history.back(), history.go() อย่างไรก็ตาม การคิดถึงสิ่งเหล่านี้ยังคงไร้ประโยชน์ ตามทฤษฎีแล้ว การส่งคืน/ส่งต่อของเบราว์เซอร์/webview จำเป็นต้องโหลดหน้าเว็บซ้ำเนื่องจาก URL มีการเปลี่ยนแปลง หากคุณรู้เกี่ยวกับ Single Page Application (SPA) หรือใช้ React/Vue จริงๆ คุณควรรู้ว่ามีสิ่งที่เรียกว่า: การกำหนดเส้นทาง การเปลี่ยนแปลง URL เหล่านี้ที่เปลี่ยนแฮชและไม่สามารถรีเฟรชได้คือฟังก์ชันประวัติที่เพิ่มใน HTML5
อินเทอร์เฟซประวัติศาสตร์
ประวัติอินเทอร์เฟซ { คุณลักษณะแบบอ่านอย่างเดียวที่มีความยาวไม่ได้ลงนาม scrollRestoration; แอตทริบิวต์แบบอ่านอย่างเดียว (ตัวเลือกแบบยาวเดลต้า = 0); เป็นโมฆะไปข้างหน้า (); url = null); ถือเป็นโมฆะแทนที่สถานะ (ข้อมูลใด ๆ ชื่อ DOMString, DOMString เสริม? url = null);};มีอีกเหตุการณ์หนึ่ง
pushState, replacementState ใช้เพื่อเปลี่ยนลำดับสแต็กประวัติ onpopstate จะถูกทริกเกอร์เมื่อย้อนกลับและก้าวไปข้างหน้า
เช่นเดียวกับการใช้งานใน vue-router (บรรทัด 1694)
การดำเนินการเฉพาะหลังจากที่เราได้พูดไปมากมายแล้ว มาดูวิธีการใช้ฟังก์ชันนี้กันดีกว่า
มาดูความเข้ากันได้ของ pushState และ replacementState กัน
เป็นสีเขียวทั้งหมดและให้ความรู้สึกปลอดภัยในการใช้งานมากขึ้น
ความคิด:
<button onclick=city()> เมือง</button><br> <button onclick=calendar()> ปฏิทิน</button><br> <button onclick=description()> คำอธิบาย</button> <div id=city class=com style=display: none;> เลเยอร์ป๊อปอัปจำลองเมือง</div> <div id=calendar class=com style=display: none;> เลเยอร์ป๊อปอัปปฏิทินจำลอง</div> <div id=description class=com style=display: none;> จำลองเลเยอร์ป๊อปอัปคำอธิบาย</div>
ปุ่ม { เส้นขอบ: #0000; สีพื้นหลัง: #888589; var cityNode = document.getElementById('city'); var CalendarNode = document.getElementById('calendar'); var descriptionNode = document.getElementById('description'); ฟังก์ชั่นเมือง () { cityNode.style.display = 'block' ; window.history.pushState({'id':'city'},'','#city') } ปฏิทินฟังก์ชัน () { CalendarNode.style.display = 'block'; window.history.pushState ({'id':'calendar'},'','#calendar') } คำอธิบายฟังก์ชัน () { descriptionNode.style.display = 'block'; window.history.pushState({'id':'description'},'','#description') } window.addEventListener('popstate', function(e){ // alert('state:' + e.state + ', historyLength:' + history.length); if (e.state && e.state.id === 'เมือง') { history.replaceState('','','#'); cityNode.style.display = 'บล็อก'; } else if (e.state && e.state.id === 'ปฏิทิน') { history.replaceState('','','#'); จอแสดงผล = 'บล็อก'; } else if (e.state && e.state.id === 'คำอธิบาย') { history.replaceState('','','#'); descriptionNode.style.display = 'block' } else { cityNode .style.display = 'ไม่มี'; CalendarNode.style.display = 'ไม่มี'; descriptionNode.style.display = 'ไม่มี' } })ดูโค้ด JS เป็นหลักและติดตามเหตุการณ์ไปข้างหน้าและย้อนกลับของเพจเพื่อควบคุมประวัติ
ซอร์สโค้ดที่นี่
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network