ส่งคืนวิธีการนำไปใช้งานในหน้า Html5

เห็นชื่อนี้แล้วอาจจะคิดว่านี่มันเรื่องอะไรกัน? จริงๆ แล้วสิ่งที่ผมอยากจะพูดก็คือ ดูบันทึกข้างล่างนี้:

การโต้ตอบประเภทนี้เป็นเรื่องปกติในหน้า 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);};

1. พุชสเตท
2. แทนที่รัฐ

มีอีกเหตุการณ์หนึ่ง

1. onpopstate

pushState, replacementState ใช้เพื่อเปลี่ยนลำดับสแต็กประวัติ onpopstate จะถูกทริกเกอร์เมื่อย้อนกลับและก้าวไปข้างหน้า

เช่นเดียวกับการใช้งานใน vue-router (บรรทัด 1694)

หลังจากที่เราได้พูดไปมากมายแล้ว มาดูวิธีการใช้ฟังก์ชันนี้กันดีกว่า

มาดูความเข้ากันได้ของ pushState และ replacementState กัน

เป็นสีเขียวทั้งหมดและให้ความรู้สึกปลอดภัยในการใช้งานมากขึ้น

ความคิด:

1. PushState เพิ่มแฮชเมื่อคลิกที่เลเยอร์ป๊อปอัป
2. เมื่อเหตุการณ์ onpopstate ถูกทริกเกอร์เมื่อแตะเพื่อย้อนกลับ เลเยอร์ป๊อปอัปจะถูกซ่อนและแฮชจะถูกแก้ไข

 <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