دعونا نتحدث بإيجاز عن استخدام PushState وreplaceState في H5

يقدم HTML5 الأساليبhistory.pushState() وhistory.replaceState()، والتي يمكنها إضافة وتعديل إدخالات السجل على التوالي. تُستخدم هذه الطرق عادةً مع window.onpopstate.

لنفترض أن كود JavaScript التالي تم تنفيذه في http://mozilla.org/foo.html:

 varstateObj = { 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، وستقوم الصفحة بتشغيل حدث popstate. تحتوي حالة كائن الحدث على نسخة من StateObj. الصفحة نفسها هي نفسها foo.html، على الرغم من إمكانية تعديل محتواها في الحدث popstate.

إذا نقرنا على زر الرجوع مرة أخرى، فسيتغير عنوان URL للصفحة إلى http://mozilla.org/foo.html، وسيقوم مستند كائن المستند بتشغيل حدث popstate آخر هذه المرة يكون كائن حالة كائن الحدث فارغًا. نفس الشيء هنا، العودة لا تغير محتوى المستند، على الرغم من أن المستند قد يغير محتواه عند استقبال حدث popstate، إلا أن محتواه سيظل متسقًا مع العرض التقديمي السابق.

يتطلب PushState() ثلاث معلمات: كائن الحالة، والعنوان (الذي تم تجاهله حاليًا)، و(اختياري) عنوان URL، فلنشرح هذه المعلمات الثلاثة بالتفصيل:

كائن الحالة - حالة كائن الحالة هي كائن JavaScript يقوم بإنشاء إدخالات سجل جديدة عبر PushState (). عندما ينتقل المستخدم إلى حالة جديدة، يتم إطلاق حدث popstate، وتحتوي خاصية حالة الحدث على نسخة من كائن الحالة الخاص بإدخال السجل.

title - يتم تجاهل هذه المعلمة حاليًا، ولكن يمكن استخدامها في المستقبل. يعد تمرير سلسلة فارغة أمرًا آمنًا هنا، ولكنه غير آمن في المستقبل. وبدلاً من ذلك، يمكنك تمرير عنوان قصير لحالة الانتقال.

عنوان URL — تحدد هذه المعلمة سجل عنوان URL التاريخي الجديد. لاحظ أن المتصفح لن يقوم بتحميل عنوان URL هذا فورًا بعد استدعاء PushState()، ولكنه قد يقوم بتحميل عنوان URL هذا في ظل ظروف معينة لاحقًا، مثل عندما يعيد المستخدم فتح المتصفح. لا يجب أن يكون عنوان URL الجديد مسارًا مطلقًا. إذا كان عنوان URL الجديد عبارة عن مسار نسبي، فسيتم التعامل معه على أنه متعلق بعنوان URL الحالي. يجب أن يكون لعنوان URL الجديد نفس أصل عنوان URL الحالي، وإلا فسيطرح PushState() استثناءً. هذه المعلمة اختيارية ويتم تعيينها افتراضيًا على عنوان URL الحالي.

بمعنى ما، استدعاء PushState() يشبه الإعداد window.location = #foo، وكلاهما سينشئان وينشطان سجل سجل جديد في الصفحة الحالية. لكن PushState() يتمتع بالمزايا التالية:

يمكن أن يكون عنوان URL الجديد هو أي عنوان URL له نفس أصل عنوان URL الحالي. ويحتفظ إعداد window.location بنفس الملف فقط إذا قمت بتعديل قيمة التجزئة فقط.

إذا رغبت في ذلك، يمكن إنشاء سجل محفوظات دون تغيير عنوان URL. من خلال تعيين window.location = #foo;، سيتم إنشاء إدخال سجل جديد فقط إذا كانت التجزئة الحالية ليست #foo.

يمكننا ربط البيانات التعسفية بعناصر السجل الجديدة. باستخدام الطريقة القائمة على قيمة التجزئة، يجب تشفير جميع البيانات ذات الصلة في سلسلة قصيرة.

استخدام History.replaceState () يشبه إلى حد كبير History.pushState () والفرق هو أن ReplaceState () يعدل عنصر السجل الحالي بدلاً من إنشاء عنصر جديد.

عندما يتغير إدخال السجل النشط، يتم تشغيل حدث popstate على كائن النافذة المقابل. إذا تم إنشاء إدخال السجل النشط حاليًا بواسطة الأسلوبhistory.pushState()، أو تم تعديله بواسطة الأسلوبhistory.replaceState()، فإن خاصية الحالة لكائن الحدث popstate تحتوي على نسخة من كائن الحالة الخاص بإدخال السجل.

يمكننا أيضًا الحصول على الحالة مباشرةً على كائن السجل، كما يلي:

 var currentState = History.state;

تجدر الإشارة إلى أن استدعاء History.pushState() أوhistory.replaceState() لن يؤدي إلى تشغيل الحدث popstate. سيتم تشغيل الحدث opstate فقط في إطار إجراءات معينة للمتصفح، مثل النقر على زري الخلف والأمام (أو استدعاء الأساليب History.back() وhistory.forward() وhistory.go() في JavaScript).

إذا كان عنوان صفحة الويب الحالية هو http://example.com/example.html، فقم بتشغيل التعليمات البرمجية التالية:

 window.onpopstate = function(event) { تنبيه(location: + document.location + ,state: + JSON.stringify(event.state));};// ربط وظيفة معالجة الأحداث History.pushState({page: 1 }) , title 1, ?page=1); // إضافة وتنشيط إدخال السجل http://example.com/example.html?page=1, فهرس الإدخال هو 1history.pushState({page: 2}, title 2, ?page=2); // إضافة وتنشيط إدخال السجل http://example.com/example.html?page=2, فهرس الإدخال هو 2history.replaceState({page: 3}, title 3, ? page=3); // تعديل إدخال السجل المنشط حاليًا http://ex..?page=2 إلى http://ex..?page=3، وفهرس الإدخال هو 3history.back(); الموقع المنبثق: http://example.com/example.html?page=1, الحالة: {page:1}history.back(); // الموقع المنبثق: http://example.com/example.html, الحالة: nullhistory.go(2); // الموقع المنبثق: http://example.com/example.html?page=3, الحالة: {page:3}

يستخدم Wang Er PushState () بشكل أساسي لأنه يمكنه مراقبة حدث الإرجاع على المتصفح. وهذا ينطبق أيضًا على الجهاز المحمول. يرجى الرجوع إلى الكود التالي (يمكن تشغيله مباشرة):

 <body> <div>window.onpopstate يمكنه مراقبة حدث مفتاح الإرجاع</div> <script> History.pushState({}, ); window.onpopstate = function(event) { // هنا يمكنك مراقبة حدث إرجاع المتصفح وافعل ما تريد القيام به، // على سبيل المثال: انتقل إلى صفحة ويب أخرى location.href = https://www.baidu.com }; </script></body>

بالطبع، يمكنك أيضًا استخدام window.onhashchange لمراقبة حدث الإرجاع على المتصفح، يرجى الرجوع إلى الكود التالي (يمكن تشغيله مباشرة):

 <body> <div>window.onhashchange يمكنه مراقبة حدث مفتاح الإرجاع</div> <script> setTimeout(()=>{ location.hash=a },100); function(event) { location.href = https://www.baidu.com } },200);

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