HTML5 History API تنفذ قفزة خالية من التحديث

ذات مرة عندما كنت على **. com ، وجدت أن تأثير الرسوم المتحركة لتسجيل الدخول والتسجيل كان رائعا للغاية ، ولكن ما صدمني هو أن الصفحة لا يمكن أن تحقق أي قفزة تحديث. لقد راجعت المعرفة الأمامية التي تعلمتها ، ويبدو أنه لا توجد تقنية لتحقيق ذلك. لذلك بحثت على Baidu واكتشفت أن هذا تم تحقيقه في الأصل باستخدام API History في HTML5.

ذات مرة عندما كنت على **. com ، وجدت أن تأثيرات الرسوم المتحركة لتسجيل الدخول والتسجيل كانت رائعة للغاية ، ولكن ما صدمني هو أن الصفحة يمكن أن تحقق بالفعل قفزات خالية من التحديث (منقحة ، يمكنك الوصول إلى هذا المكان عند مشاهدة هذا التأثير: github أو fm). لقد راجعت المعرفة الأمامية التي تعلمتها ، ويبدو أنه لا توجد تقنية يمكنها تحقيق ذلك. لذلك اكتشفت أن هذا تم تحقيقه في الأصل باستخدام API للتاريخ في HTML5 ، لكنه لم يكن في متناول يدي. لم يتم تطبيق هذه التكنولوجيا حتى تتم مراجعة المدونة.

1. أضيفت وظيفة إضافة عناصر في تاريخ المتصفح عبر JS.

2. عرض عنوان URL في شريط عنوان المتصفح الذي تم تغييره دون تحديث الصفحة.

3. أضاف حدث يطلق النار عندما ينقر المستخدم على زر العودة للمتصفح.

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

على سبيل المثال: عندما يكون محتوى الصفحة A والصفحة B مختلفة ، قبل HTML5 ، إذا قمت بالتبديل من الصفحة A إلى الصفحة B ، فأنت بحاجة إلى التبديل من الصفحة A إلى الصفحة B في المتصفح ، أو إذا كنت بحاجة إلى وظيفة زر استرداد ، فيمكنك إضافة #xxxx إلى عنوان URL لتحقيق وظيفة الخلفية. الآن في HTML5 ، يمكنك تنفيذ المعالجة التالية من خلال واجهة برمجة تطبيقات التاريخ:

1. طلب ​​البيانات B في الصفحة A عن طريق إرسال طلب AJAX.

2. قم بتحميل المعلومات المقابلة من خلال JS في الصفحة A إلى الموقع المقابل.

3. قم بالتبديل من عنوان عنوان URL الخاص بالصفحة A إلى عنوان URL الخاص بالصفحة B في شريط عنوان المتصفح من خلال API History دون تحديث الصفحة.

1. طول عدد المصطلحات في التاريخ. يقتصر التاريخ الذي يمكن أن تديره JavaScript على النطاق الذي يمكن الوصول إليه باستخدام المفاتيح الأمامية والخلفية للمتصفح. تقوم هذه الخاصية بإرجاع مجموع عدد العناوين الواردة في الأزرار الأمامية والخلفية.

1. الظهر () مرة أخرى ، وهو ما يعادل الضغط على مفتاح الظهر.

2. Forward () المضي قدمًا يعادل الضغط على المفتاح الأمامي.

3.Go () الاستخدام: History.go (x) ؛ انتقل إلى العنوان المحدد في نطاق التاريخ. إذا كانت x <0 ، ثم ارجع عن عناوين X ، إذا كانت x> 0 ، ثم إعادة توجيه العناوين x ، إذا كانت x == 0 ، ثم قم بتحديث الصفحة التي يتم فتحها الآن. History.go (0) يعادل الموقع. reload ().

1. History.PushState (البيانات ، العنوان [، URL]): أضف سجلًا إلى أعلى مكدس التاريخ ؛ سيتم تمرير البيانات كمعلمة عندما يتم تشغيل حدث OnPopstate ؛ العنوان هو عنوان الصفحة ، وسيتجاهل جميع المتصفحات الحالية هذه المعلمة ؛ عنوان URL هو عنوان الصفحة ، اختياري ، والافتراضي هو عنوان الصفحة الحالي.

2. History.Replacestate (البيانات ، العنوان [، URL]): تغيير التاريخ الحالي ، المعلمات هي نفسها كما هو موضح أعلاه.

3. التاريخ. أذونات القراءة والكتابة من المتصفحات المختلفة مختلفة.

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

حتى الآن ، يدعم المتصفح واجهة برمجة تطبيقات التاريخ في HTML5 بواسطة IE10 أو Firefox4 أو أعلى ، Chrome 8 أو أعلى ، Safari5 أو أعلى.