إرجاع طريقة التنفيذ في صفحة Html5

عندما ترى هذا العنوان، قد تتساءل ما هذا بحق الجحيم؟ في الواقع ما أريد قوله هو هذا، شاهد التسجيل أدناه:

هذا النوع من التفاعل شائع في صفحات H5. انقر على المدينة -> انبثاق الطبقة العائمة لاختيار المدينة -> اضغط على زر العودة لإغلاق الطبقة العائمة.

يمكن تنفيذ هذه العمليات دون النقر على زر الإغلاق الموجود في الزاوية اليسرى العليا/الزاوية اليمنى العليا. تحتوي Fliggy's H5 على طبقة منبثقة عند التحرك للأمام، وتغلق الطبقة المنبثقة عند العودة (لا يعمل هذا مع الشركات الأخرى). تذاكر طيران Qunar.com H5، فندق Meituan H5).

نظرًا لأن H5 يعمل على هاتف محمول، فإن منطقة التغطية للمنطقة التي يمكن تشغيلها بالإصبع على الهاتف المحمول صغيرة جدًا، ناهيك عن المناطق الميتة (الإلغاء/الإغلاق) في الزاوية اليسرى العليا/الزاوية اليمنى العليا. لا شك أنك سمعت هذا الإجراء: انقر للرجوع. يعد هذا أمرًا مريحًا وسهل الاستخدام بالنسبة للمستخدمين بعد تحديد المدينة، ليست هناك حاجة للنقر فوق "إلغاء الأمر" فقط انقر فوق "رجوع" حيث يمكن للإبهام أن يعمل لإغلاق الطبقة المنبثقة.

نظرًا لوجود طلب جيد جدًا، كمطور، ستبذل بالتأكيد قصارى جهدك لتنفيذ هذه الوظيفة. لا تحتاج حتى إلى البحث في جوجل، يجب أن تكون قادرًا على التفكير في طرق مثل History.back() وhistory.go(). ومع ذلك، لا يزال التفكير في هذه الأمور عديم الفائدة من الناحية النظرية، تتطلب إعادة/إعادة توجيه المتصفح/عرض الويب إعادة تحميل الصفحة لأن عنوان URL قد تغير. إذا كنت تعرف حقًا تطبيقات الصفحة الواحدة (SPA)، أو تستخدم React/Vue، فيجب أن تعلم أن هناك شيئًا يسمى: التوجيه. تغييرات عنوان URL هذه التي تغير التجزئة ولا يمكن تحديثها هي وظائف السجل المضافة في HTML5.

واجهة التاريخ

 سجل الواجهة { سمة للقراءة فقط غير موقعة؛ سمة ScrollRestoration، التمرير للقراءة فقط؛ أي حالة؛ دلتا طويلة اختيارية = 0)؛ url = null); void renderState(any data, DOMString title, DOMString اختياري? url = null);};

1. PushState
2. استبدال الدولة

هناك حدث آخر

1. com.onpopstate

يتم استخدام PushState وreplaceState لتغيير ترتيب مكدس المحفوظات، ويتم تشغيل onpopstate عند العودة والمضي قدمًا.

وينطبق الشيء نفسه على التنفيذ في vue-router (السطر 1694)

الآن بعد أن قلنا الكثير، دعونا نلقي نظرة على كيفية تنفيذ هذه الوظيفة.

دعونا نلقي نظرة على مدى توافق PushState وreplaceState

كل شيء باللون الأخضر ويشعر بأنه أكثر أمانًا في الاستخدام.

فكرة:

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؛ لون الخلفية: #f90 } .com { الموضع: أعلى: 0؛

 var cityNode = document.getElementById('city'); var CalendarNode = document.getElementById('calendar'); var descriptionNode = document.getElementById('description'); window.history.pushState({'id':'city'},'','#city') } وظيفة التقويم() { ; CalendarNode.style.display = 'block'; window.history.pushState({'id':'calendar'},'','#calendar') } function description() { descriptionNode.style.display = 'block'; window.history.pushState({'id':'description'},'','#description') } window.addEventListener('popstate', function(e){ // تنبيه('state:' + e.state + ',historyLength:' +history.length if (e.state && e.state.id === 'city') {history.replaceState('','','#'); cityNode.style.display = 'block' } else if (e.state && e.state.id === 'calendar') {history.replaceState('','','#'); عرض = 'كتلة'؛ } else if (e.state && e.state.id === 'description') { History.replaceState('','','#'); descriptionNode.style.display = 'block' } else { cityNode .style.display = 'none'; CalendarNode.style.display = 'none'; descriptionNode.style.display = 'none' } })

انظر بشكل أساسي إلى كود JS وراقب الأحداث الأمامية والخلفية للصفحة للتحكم في السجل.

كود المصدر هنا

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.