API سجلات التاريخ في HTML5

طريقة استخدام API تاريخ HTML5، عرض أمثلة تفاعلية عبر الإنترنت توضح كيفية استخدام API تاريخ HTML5، تردد التوافق مع المتصفحات، تعريف النصوص والقيم المميزة لخصائصه.

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

قائمة التاريخ

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

هذا مثال على قائمة التاريخ:

http://myapp.com/great-new-story.html
http://myapp.com/news.html
http://myapp.com

الصفحة الأخيرة التي تم زيارتها في قائمة التاريخ هي http://myapp.com/great-new-story.html. إذا ضغط المستخدم على زر "التراجع"، فإن مؤشر قائمة التاريخ سينتقل إلى http://myapp.com/news.html. إذا ضغط المستخدم على زر "التقدم"، فإن مؤشر قائمة التاريخ سينتقل إلى http://myapp.com/great-new-story.html، ولكن إذا ضغط المستخدم على رابط آخر (على صفحة http://myapp.com/news.html)، فإن URL للرابط سيغطي http://myapp.com/news.html في قائمة التاريخ.

يتيح API تاريخ HTML5 للبرامج الويب الوصول إلى قائمة التاريخ.

تحديدات الأمان لـ HTML5 History API

يسمح API تاريخ HTML5 فقط للصفحة الويب بزيارة جزء من تاريخ التصفح، هذا الجزء يجب أن يكون في نفس المجال. هذا التحديد في API التاريخ بسبب الأسباب الأمنية هو ضروري، لذا لا يمكن للصفحة الويب عرض المواقع الأخرى التي زارها المستخدم.

بالنسبة لـ HTML5 History API، لا يسمح بوضع URL في قائمة التاريخ من خلال صفحة الويب، إذا لم يكن مجال URL في نفس المجال. هذا التحديد يضمن أن لا يمكن للصفحة الويب أن تزيف تحويل المستخدم إلى مثلاً Paypal واستكشاف اسم المستخدم/كلمة المرور الخاصة به.

عقدة التاريخ

يمكنك الوصول إلى التاريخ من خلال عقدة history، والتي يمكن استخدامها كعنصر عالمي في JavaScript (في الواقع window.history).

يحتوي عقدة history على وظائف بما في ذلك API التاريخ:

• back()

• forward()

• go(index)

• pushState(stateObject, title, url)

• replaceState(stateObject, title, url)

تقوم وظيفة back() بإرجاع التاريخ إلى URL السابق. يمثل استدعاء back() نفس تأثير النقر على زر "الرجوع" في المتصفح.

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

تتيح دالة go(index) للتنقل إلى الأمام أو إلى الخلف في قائمة التاريخ بناءً على المؤشر الذي تم تمريره إلى دالة go(). إذا تم استدعاء go() باستخدام مؤشر سالب (مثل go(-1))، فإن المتصفح سيقوم بالرجوع إلى التاريخ. إذا تم تمرير مؤشر إيجابي إلى دالة go()، فإن المتصفح سيقوم بالتحرك إلى الأمام في التاريخ (مثل go(1)). المؤشر يحدد عدد الخطوات التي يجب القيام بها للتحرك إلى الأمام أو إلى الخلف في التاريخ، مثل 1،2،-1،-2 وما إلى ذلك.

تضيف دالة pushState(stateObject, title, url) URL جديدة إلى قائمة التاريخ. لديها ثلاثة معلمات. الـ url هو URL الذي سيتم إضافته إلى قائمة التاريخ. المعلمات title عادة ما يتم تجاهلها من قبل المتصفح. الـ stateObject هو، عند إضافة URL جديد إلى قائمة التاريخ، يتم نقل هذا العنصر كجزء من الحدث. يمكن أن يحتوي الـ stateObject على أي بيانات تريدها. إنه مجرد جسم JavaScript.

وظيفة دالة replaceState(stateObject, title, url) تشبه وظيفة pushState()، ولكنها تحل الحالي في قائمة التاريخ بحلقة URL جديدة. العنصر الحالي ليس بالضرورة العنصر الأكثر أهمية. هذا هو العنصر الذي يشير إليه الآن، يمكن أن يكون أي عنصر في الحلقة، إذا تم استدعاء وظائف back()، forward() و go() على عقدة history.

أمثلة على API للتاريخ

الآن دعونا نرى بعض الأمثلة على كيفية استخدام API للتاريخ في HTML5.

back() و forward()

دعونا أولاً نرى كيف يمكننا استخدام وظائف back() و forward() للتنقل في التاريخ:

history.back();
history.forward();

تذكر، كائن history موجود داخل كائن window، لذا يمكنك أيضًا كتابة:

window.history.back();
window.history.forward();

لكن، نظرًا لأن كائن window هو الكائن الافتراضي، يمكنك تجاوزه. سأتجاهل الكائن في باقي هذا الدرس.

تذكر، لا يمكنك الانتقال إلى التاريخ إلا إذا قمت أنت (أو المستخدم) بالتراجع إلى التاريخ أولاً.

go()

الآن دعونا نرى كيف يمكننا استخدام وظيفة go() لتنفيذ إجراءات مشابهة لـ back() و forward(). أولاً، هذا هو الخطوة السابقة التي تستخدمها للاشتباك في التاريخ:

history.go(-1);

للتراجع خطوتين، يمكنك إرسال معامل -2 إلى وظيفة go()، مثلما هو موضح في المثال التالي:

history.go(-2);

بالمثل، إذا كنت ترغب في التقدم في التاريخ، يمكنك إرسال مؤشر إيجابي إلى وظيفة go(). هذه أمثلة على تقدم خطوة واحدة وخطوتين في التاريخ:

history.go(1);
history.go(2);

بالطبع، إذا قمت بتشغيل هاتين السطرتين في نفس الوقت، فإن تاريخ التصفح سيقوم بالانتقال إلى الأمام 3 خطوات.

pushState()

لإدخال الحالة إلى تسلسل التاريخ، قم بتشغيل وظيفة pushState() من الكائن history. هذا مثال على pushState():

var state = {};
var title = "";
var url = "next-page.html";
history.pushState(state, title, url);

في هذا المثال، سيتم إرسال URL الجديدة إلى تسلسل التاريخ. سيتم أيضًا تغيير حقل عنوان المتصفح، ولكن لن يؤدي إلى محاولة تحميل URL.

replaceState()

الوظيفة replaceState() تحدث على العنصر history في التسلسل التاريخي الحالي. إذا قام المستخدم بالتراجع إلى التسلسل التاريخي باستخدام زر "التراجع"، فقد لا يكون هذا العنصر الأهم. هذا مثال على replaceState():

var state = {};
var title = "";
var url = "another-page.html";
history.replaceState(state, title, url);

ستغير حالة الاستبدال أيضًا URL في حقل عنوان المتصفح، لكنه لن يحاول تحميل هذا URL. سيظل الصفحة التي تحتوي على URL الاستبدال موجودة في المتصفح.

تغييرات التاريخ في التصفح

يتمكن API التاريخ في HTML5 من السماح للصفحات بمتابعة التغييرات في التاريخ في المتصفح. تطبق القيود الأمنية أيضًا هنا، لذا لن يتم إعلام الصفحة بتغييرات التاريخ التي تؤدي إلى تجاوز نطاق مجال الصفحة.

للتحقق من تغييرات التاريخ في المتصفح، قم بتعيين مستمع على onpopstate في عنصر window. هذا هو مثال على مستمع أحداث التاريخ في المتصفح:

window.onpopstate = function(event){
　　　　console.log("تغيير التاريخ إلى: " + document.location.href);
　}

سيتم استدعاء معالج أحداث onpopstate كل مرة يتم فيها تغيير التاريخ في التاريخ في الصفحة نفسها (التاريخ في المتصفح، الصفحة يتم توجيهها إلى قائمة التشغيل التاريخية). قد تكون رد الفعل على أحداث التغيير في التاريخ استخراج المعلمات من URL وتحميل المحتوى المماثل على الصفحة (مثل استخدام AJAX).

ملاحظة: فقط التغييرات التي تؤدي إلى أي "عودة" أو "التقدم" في زر أو وظيفة التصفح التاريخي المماثلة، أو back()، forward() و go()، ستجعل مشغل أحداث onpopstate يتم استدعاؤه. استدعاء وظائف pushState() و replaceState() لن يسبب تغييرات في التاريخ.

استخدام API History في الممارسة

عند إرسال URL جديدة إلى قائمة التشغيل التاريخية، يتم تغيير URL في حقل عنوان المتصفح إلى URL الجديد. ولكن، لن يحاول المتصفح تحميل هذا URL. سيتم عرض URL فقط وإرساله إلى القائمة، كما لو كان المتصفح قد زار الصفحة، ولكن الصفحة التي تحتوي على حالة جديدة تبقى في المتصفح.

إرسال URL الجديدة إلى قائمة التشغيل التاريخية هو طريقة مفيدة لجعل حالة معينة قابلة للتحديد كعلامة مرجعية في تطبيقات الـSPA. على سبيل المثال، في متجر على الإنترنت من نوع الصفحة الواحدة، قد يكون URL التطبيق:

http://myshop.com

قد يكون التطبيق قادرًا على عرض المنتجات على نفس الصفحة للمستخدم، لكن كيف يمكن للمستخدم إرسال رابط إلى منتج معين إلى صديق؟

الحل هو، عند تحميل المنتج الجديد، يتم إرسال URL الجديدة إلى قائمة التشغيل التاريخية. لن يؤدي هذا إلى تحميل URL الجديدة، لكنه سيجعلها مرئية في حقل عنوان المتصفح. من هنا يمكن إضافتها كعلامة مرجعية أو نسخها ولصقها في بريد إلكتروني وما إلى ذلك. إليك مثال على مظهر URL القابلة لإضافة العلامة المرجعية من هذا النوع:

http://myshop.com?productId=234

أو ربما URL أكثر قراءةً:

http://myshop.com/products/234

أو نسخة قليلاً أكثر من REST (ويتم ذكر نوع المنتج أيضًا):

http://myshop.com/products/books/234

بعد推送 URL إلى تاريخ التصفح، سيقوم صفحة متجر الويب بتحميل المنتج المتبادل عبر AJAX وإظهاره للمستخدم.

إذا قام المستخدم بالنقر على زر "التراجع"، فإن onpopstate سينفذ البرنامج النصي. ثم يجب على الصفحة التحقق من URL الجديد، إذا كان URL موجودًا، فيجب تحميل الصفحة الرئيسية للمنتج أو التطبيق الذي يتوافق مع هذا URL http://myshop.com.

هذا مثال على HTML5 يوضح المبدأ الذي يتم من خلاله تحميل البيانات إلى المتصفح باستخدام AJAX:

<a href="javascript:push('http://myshop.com/books/123');">
　　　　Book 123
</a> <br/>
<a href="javascript:push('http://myshop.com/apps/456');">
　　　　App 456
</a>
<script>
function loadUrl(url) {
　　　　console.log("تحميل البيانات من URL: " + url);
}
function push(url) {
　　　　history.pushState(null, null, url);
　　　　loadUrl(url);
}
window.onpopstate = function(event) {
　　　　console.log("تغيير التاريخ إلى: " + document.location.href);
　　　　loadUrl(document.location.href);
}
</script>

يحتوي هذا المثال على رابطين يحتويان على مستمعات Click JavaScript. عند النقر على أحد الروابط، يتم دفع URL المتبادل إلى حقل تاريخ التصفح، ثم يتم تحميله في المتصفح.

يحتوي هذا المثال أيضًا على مستمع لحادثة onpopstate. عند النقر على زر "التراجع" أو "التقدم"، يتم تحميل هذا المستمع أي URL يظهر حاليًا في حقل عنوان المتصفح.

تكوين الخادم

إذا قام المستخدم بالنقر على الرابط والزر "التراجع" أو "التقدم"، فإن العينة التي ظهرت مسبقًا ستدخل حيز التنفيذ. ولكن ماذا إذا قام المستخدم بإرسال URL إلى صديق أو إضافتها كعلامة مرجعية واستعادة زيارتها لاحقًا؟

إذا حاول المستخدم الوصول إلى URL المزودة بالعلامة، http://myshop.com/books/123، فإن المتصفح سيطلب هذا URL من خادم الويب. يجب على خادم الويب معرفة أنه يجب إرسال نفس التطبيق الواحد الصفحة http://myshop.com الذي تم استقباله من URL. ستحتاج إلى تكوين خادم الويب للقيام بذلك.

بالنسبة للتطبيقات الواحدة الصفحة، يجب أن تنظر التطبيقات الواحدة الصفحة إلى URL التي تم استخدامها أولاً عند التحميل، وأن تستخدم هذه URL لتحديد المحتوى الذي يجب تحميله وعرضه. لذلك، إذا تم تحميل URL من قبل التطبيق الواحد الصفحة، فإن myshop.com/books/123 يجب على هذا التطبيق تحميل المنتج المطلوب وعرضه. يجب إجراء هذا التحقق عند بدء تشغيل التطبيق الواحد الصفحة.

دعم المتصفحات لـ API سجلات التاريخ في HTML5

في كتابة هذا المقال، باستثناء Opera Mini، يدعم جميع المتصفحات الحديثة (IE،Safari،Chrome،Firefox) API سجلات التاريخ في HTML5.