الشفرة

كيفية إدارة زر العودة مع جافا سكريبت

إحدى المشكلات الرئيسية في التطبيقات التي تستند إلى JavaScript هي أنها تكسر الزر "رجوع". إذا قمت بتحديث محتوى على الصفحة باستخدام JavaScript بدلاً من تحميل صفحة جديدة من الخادم ، فلن يكون أي إدخال في سجل المتصفح ؛ لذلك عندما ينقر المستخدم على "رجوع" ، متوقعًا العودة إلى الحالة السابقة ، ينتهي به الأمر في الموقع السابق بدلاً من ذلك.

يعتبر السحب والإفلات طريقة رائعة للمستخدمين للتفاعل مع تطبيقات الويب الخاصة بك. ولكن ستفقد مكاسب إمكانية الاستخدام إذا بعد النقر على الوقت المستغرق في تطبيقك ، ينقر المستخدمون على الزر "رجوع" الذين يتوقعون العودة إلى الصفحة والعودة بدلاً من ذلك إلى شاشة البدء. في هذه المقالة "مرحبا! HTML5 & CSS3 ”يوضح لك Rob Crowther كيفية استخدام واجهة برمجة تطبيقات سجل HTML5 لتجنب هذا المصير.

يمكن البرهنة على المشكلة ببساطة. كل ما تحتاجه هو وظيفة تقوم بتحديث الصفحة استجابة لنشاط المستخدم: 

var times = 0;function doclick() {times++;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

وترميز صغير: 

Click Me
Recorded 0 clicks

في الحياة الواقعية ، ستقوم صفحة الويب الخاصة بك بعمل شيء أكثر تعقيدًا ، مثل جلب محتوى جديد من الخادم عبر AJAX ، ولكن تحديث بسيط يكفي لإثبات المفهوم. لنرى ما يحدث عندما يزور المستخدم الصفحة.

  1. يبدأ المستخدم على الصفحة الرئيسية ويقرر زيارة تطبيق Click Me المدهش الذي سمع عنه.
  2. فهم يكتبون عنوان URL أو يتبعون رابطًا من بريد إلكتروني للوصول إلى صفحة Click Me.
  3. بعد بضع ثوانٍ من التفاعل الممتع ، تغيرت حالة الصفحة عدة مرات.
  4. ولكن عندما يقوم المستخدم بالنقر فوق الزر "السابق" في المستعرض ، وجد أنه بدلاً من الرجوع إلى حالة صفحة سابقة ، فإنه يقفز إلى صفحته الرئيسية.

يمكن تحديث وظيفة doclick () للاستفادة من واجهة برمجة تطبيقات السجل. في كل مرة يتم فيها تحديث الصفحة ، سيتم أيضًا تعيين location.hash: 

function doclick() {times++;location.hash = times;document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}
  1. يصل المستخدم إلى صفحة Click Me كما كان من قبل.
  2. لاحظ أنه الآن يتم تحديث عنوان URL بعد ظهور كل نقرة - "#" في نهايته.
  3. يؤدي النقر فوق الزر "السابق" الآن إلى إعادة الموقع إلى # 2 ، مما يدل على أن حالات الصفحة قد تمت إضافتها بنجاح إلى السجل. ولكن لاحظ أن النقر على زر "رجوع" لا يؤدي تلقائيًا إلى إرجاع الصفحة إلى حالتها السابقة.

تحديث حالة الصفحة

تحديث التاريخ ليس سوى جزء من المشكلة ؛ تحتاج أيضًا إلى أن تكون قادرًا على تحديث حالة الصفحة لمطابقة الحالة في السجل.

نظرًا لأنك الشخص الذي يدير السجل ، فالأمر متروك لك لإدارة حالة الصفحة. من أجل تحديث صفحتك ردًا على location.hash الذي يتم تغييره ، يمكنك الاستماع إلى حدث hashchange: 

function doclick() {times++;location.hash = times;}window.onhashchange = function() {if (location.hash.length > 0) {times = parseInt(location.hash.replace('#',''),10);} else {times = 0;}document.getElementById('message').innerHTML ='Recorded ' + times + ' clicks';}

تعد وظيفة doclick () مسؤولة الآن عن تحديث متغير الأوقات وتغيير التجزئة. حدث hashchange على كائن الإطار؛ عندما يحدث ذلك ، تحقق من وجود التجزئة. في التطبيق الحقيقي ، يجب أيضًا التحقق من أن له قيمة صالحة. بعد ذلك ، يمكنك تعيين قيمة المرات لتكون الرقم في التجزئة. وأخيرًا ، تقوم بتحديث المستند لعكس حالة الصفحة الصحيحة. دعونا ننظر في هذا الرمز الجديد:

  1. كما كان من قبل ، يتم تحديث التجزئة في عنوان URL عندما ينقر المستخدم.
  2. ولكن الآن ، عند النقر فوق الزر "الخلف" ، يتم تشغيل الدالة onhashchange وتتم إعادة تعيين حالة الصفحة لتتطابق مع عنوان URL.

باستخدام location.hash

تعتبر الخاصية location.hash وحدث hashchange المقترن مفيدًا إذا كنت تريد وضع علامة على طرق عرض معينة للتطبيق والسماح للمستخدم بالتنقل بينها. يستخدم Google Mail هذه الطريقة من خلال السماح لك بالتنقل بين البريد الوارد (#inbox) وجهات الاتصال (#contacts) والمشاهدات الأخرى - إذا كان لديك حساب Gmail ، فابحث عما يحدث لعنوان URL أثناء التنقل إلى مختلف الصفحات المختلفة ثم انقر فوق العودة.

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

ملخص

لقد تعلمت أن إدارة محفوظات المستعرض تسمح لك بأن تجعل زر Back يتصرف بطريقة أكثر منطقية في سياق التطبيق الخاص بك ، بينما تمنحك واجهة برمجة التطبيقات microdata إمكانية الوصول إلى المعلومات الدلالية المنظمة في محتويات الصفحة.

ما هي الاستخدامات التي تتوخاها لهذه التقنية؟ هل طورت طريقة مختلفة؟ اسمحوا لنا أن نعرف في التعليقات.

صورة مميزة / صورة مصغرة ، أعود الصورة عبر Shutterstock.

تطبيقات جافا سكريبت زر العودة مرحبا html5 و CSS تاريخ المعهد سلب المزاح