وقد تم وصف هذه الوظيفة لفترة وجيزة من قبل. هذه المرة ، سنشرح المبادئ والمشاكل الحالية بالتفصيل (نظرًا لأنه يستخدم واجهة برمجة التطبيقات الجديدة لـ HTML5 ، فهناك مشكلات توافق ، لذلك يوصى باستخدام محطة الهاتف المحمول هذه الطريقة).
وصف الوظيفة:
قم بإنشاء صفحة علامة تبويب جديدة في المتصفح وحدد عنوان URL. بعد تحميل صفحة الويب ، لا يُسمح للنقرات بالعودة تحت العملية العادية. لأنه لا يوجد تاريخ ذي صلة لصفحة علامة التبويب الحالية ، لا يمكن إرجاع أي سجلات.
استجابةً لطلب العميل ، في هذه الحالة ، أضف رابطًا (مثل الصفحة الرئيسية) إلى سجل السجل الخاص به ، بحيث في الصفحة المفتوحة حديثًا ، انقر للعودة ، يمكنك القفز إلى الصفحة الرئيسية ، مما يتيح للمستخدمين رؤية وظائف النظام المختلفة والترويج للمنصة.
1. نقاط المعرفة الرئيسية
يقدم HTML5 طريقة History.PushState () طريقة. يمكن أن تعمل هذه الأساليب مع النافذة.
قضية:
افترض أن http://mozilla.org/foo.html سوف تنفذ رمز JavaScript التالي:
نسخة الكود كما يلي: var stateObj = {foo: "bar"} ؛ History.PushState (StateObj ، "Page 2" ، "Bar.html") ؛
سيؤدي ذلك إلى جعل شريط عنوان المتصفح يظهر http://mozilla.org/bar.html ، لكن صفحة bar.html لن يتم تحميلها ولا تحقق مما إذا كان bar.html موجودًا.
لنفترض أن المستخدم يتنقل الآن إلى http://google.com ثم ينقر على زر العودة. في هذا الوقت ، سيعرض شريط العناوين http://mozilla.org/bar.html ، وستؤدي الصفحة إلى تشغيل حدث البوبستات. يحتوي كائن الدولة في الحدث على نسخة من StateObj. تبدو الصفحة مثل foo.html ، على الرغم من أنه قد يتم تعديل محتوى الصفحة في حدث popstate.
إذا النقر فوق زر العودة مرة أخرى ، فسيقوم عنوان URL بالعودة إلى مستند http://mozilla.org/foo.html لتشغيل حدث آخر بوبستات ، وهذه المرة كائن الحالة لاغية. لن يؤدي الاحتياطي أيضًا إلى تغيير محتوى المستند.
طريقة PushState ()
يحتوي PushState () على ثلاث معلمات: كائن حالة ، وعنوان (سيتم تجاهله الآن) ، وعنوان عنوان URL اختياري. دعنا ندرس تفاصيل هذه المعلمات الثلاثة بشكل منفصل:
كائن الحالة - كائن JavaScript المرتبط بإدخال تاريخ جديد تم إنشاؤه باستخدام طريقة PushState (). عندما ينتقل المستخدم إلى الحالة التي تم إنشاؤها حديثًا ، يتم تشغيل حدث PopState ، ويحتوي خاصية الحالة لكائن الحدث على نسخة من كائن الحالة لإدخال التاريخ.
يمكن التعامل مع أي كائن قابل للتسلسل ككائن حالة. نظرًا لأن متصفح Firefox يحفظ كائنات الحالة على القرص الصلب للمستخدم ، بحيث يمكن استعادته بعد إعادة تشغيل المستخدم للمتصفح ، فإننا نقصر قسراً على حجم كائنات الحالة إلى 640 ألفًا. إذا قمت بتمرير كائن حالة يتجاوز هذا الحد لطريقة 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 () يشبه إلى حد ما setting window.location = '#foo' ، وهم جميعا ينشئون وتنشيط إدخالات تاريخ جديدة داخل المستند الحالي. لكن PushState () لها مزاياها الخاصة:
1. عنوان URL الجديد يمكن أن يكون أي عنوان URL متماثل. على النقيض من ذلك ، عند استخدام طريقة وضع النافذة ، يمكن تعديل التجزئة فقط أن يبقى في نفس المستند.
2. قرر ما إذا كان سيتم تعديل عنوان URL وفقًا لاحتياجاتك الشخصية. بدلاً من ذلك ، قم بتعيين window.location = '#foo' وإنشاء سجل جديد فقط إذا كانت قيمة التجزئة الحالية ليست foo.
3. يمكنك إضافة بيانات مجردة إلى إدخال تاريخ جديد. إذا كنت تستخدم طريقة قائمة على التجزئة ، فيمكنك فقط نقل البيانات ذات الصلة إلى سلسلة قصيرة جدًا.
لاحظ أن طريقة PushState () لن تؤدي أبدًا إلى تشغيل حدث hashchange ، حتى لو كان العنوان الجديد يغير التجزئة فقط.
حدث بوبستات
يتم تشغيل حدث Popstate كلما تغير التاريخ المنشط. إذا تم إنشاء إدخال السجل المنشط بواسطة PushState أو متأثرًا بطريقة Relacestate ، فستتضمن سمة الحالة لحدث PopState نسخة من كائن حالة السجل.
طريقة replacestate ()
تشبه عملية History.Replacestate () History.pushState () ، باستثناء أن طريقة replacestate () ستعدل إدخال التاريخ الحالي بدلاً من إنشاء إدخال جديد.
عندما تريد تحديث كائن الحالة أو عنوان URL لإدخال السجل الحالي استجابةً لبعض الإجراءات من قبل المستخدم ، فإن استخدام طريقة replacestate () مناسبة بشكل خاص.
2. أفكار التنفيذ
1. استخدم حدث PopState للاستماع إلى الحدث النقر والعودة.
2. عندما يتم تشغيل الحدث ، حدد ما إذا كانت هناك صفحة لإرجاع تاريخ الصفحة الحالية.
3. إذا لم تكن هناك صفحة يمكن إرجاعها ، يتم إدخال سجلان:
1) صفحة القفز المحددة.
2) سجل فارغ. (اجعل الصفحة الحالية لا تتغير)
طريقة التنفيذ
// العودة إلى الصفحة الرئيسية بدون صفحة قبل إرجاع الدالة pushHistory () {if (History.length <2) {var state = {title: "index" ، url: gethtprefix + "index.html"} ؛ window.history.pushState (State ، "index" ، location.href) ؛ State = {title: "index" ، url: ""} ؛ window.history.pushState (State ، "INDEX" ، "") ؛ } //lll("history.state " + History.state) //console.log(history.state)}تحديد عدد السجلات في التاريخ الحالي. نظرًا لأن المتصفح سيقوم تلقائيًا بالضغط على سجل عند تحميل الصفحة. لذلك نحن بحاجة إلى تحديد ما إذا كان الطول أقل من 2.
كائن الحالة المحشوة فيه هو الحصول على رابط عنوان URL المقابل.
ملحوظة:
أضع عنوان URL للقفز في كائن الحالة لأول مرة في Pushstate لتسهيل عملية القفز. المعلمة الثانية ليس لها أهمية عملية ، لأن المتصفح الحالي لا يطبق هذه المعلمة بشكل أساسي.
ستحل المعلمة الثالثة محل الرابط في شريط العناوين الحالي ، لكن الصفحة لن تقفز. (لقد ارتكبت خطأً من قبل ، وضعت المعلمة الثالثة على رابط الصفحة الرئيسية ، والتي تسببت في تغيير شريط العناوين إلى رابط الصفحة الرئيسية ، بحيث يتم إعادة توجيه الروابط الموجودة على الصفحة الحالية بناءً على الصفحة الرئيسية ، مما يؤدي إلى خطأ جميع الروابط في الصفحة التي يتم إعادة توجيهها.)
setTimeOut (function () {pushhistory () window.addeventListener ("popstate" ، function (e) {lll ("popstate"+window.history.state) if (window.history.state! = null && window.history.state.url! = "") {location.href =يتم وضع هذا الرمز في الحدث الجاهز للصفحة ، بتأخير قدره 300 مللي ثانية لتخلف العملية ومنع النزاعات مع حدث البوب النظام.
من أجل تحديد ما إذا كان للتاريخ كائن حالة ، فإن السجلات التي تلبي متطلباتنا فقط سيكون لها كائن الحالة الذي أضفناه ، بحيث يمكن تنفيذ عملية قفزة الصفحة بناءً على هذه النقطة.
هذا سيحقق التأثير الذي نريده.
4. اكتب في النهاية
عيب:
1. من الواضح ، كما ذكر في البداية. مناسبة فقط للمتصفحات التي تدعم HTML5.
2. منذ إدراج سجلين ، تتطلب إرجاع محطات المحمول مثل WeChat إقرارين للعودة قبل إطلاق الصفحة والعودة إلى نافذة دردشة WeChat ، التي تتمتع بتجربة مستخدم سيئة.
تلخيص:
من المؤكد أن هذه الطريقة يمكن تحسينها وتحسينها ، لكن قوتي ليست كافية ليتم الكمال إلى مستوى الكمال.
آمل أن يتمكن الأصدقاء الذين يقرؤون هذا المقال من الحصول على بعض الإلهام ، أو أن هناك طرقًا أفضل لتحقيق ذلك.