HTML Academy · درس

حدث popstate

الاستجابة للتنقل إلى الخلف والأمام في المتصفح

حدث popstate درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

ما الذي يفعله popstate

يُطلَق حدث popstate على window عندما يتنقّل المستخدم عبر السجل، سواء إلى الخلف أو إلى الأمام أو من خلال استدعاء JavaScript لـ history.back. ويتيح ذلك لتطبيق SPA إعادة عرض العرض الصحيح استجابةً للتنقّل الذي بدأه المتصفح.

متى يُطلَق

يُطلَق popstate عند النقر على زري الرجوع والتقدّم، وعند استدعاء history.back() وhistory.forward() وhistory.go(n). ولا يُطلَق عند استدعاء pushState أو replaceState يدويًا — فهذه تحديثات برمجية، والصفحة تعرف بها مسبقًا.

window.addEventListener("popstate", (e) => {
  console.log("Navigated to", location.pathname, "state:", e.state);
  renderPage(location.pathname);
});

خاصية state

تحتوي خاصية state في الحدث على كائن الحالة الذي مرّرته إلى pushState أو replaceState للإدخال الذي يجري التنقّل إليه. استخدمه لاستعادة حالة واجهة المستخدم التي لا توجد في عنوان URL، مثل اللسان المفتوح وموضع التمرير.

قراءة عنوان URL الجديد

يكون شريط العنوان قد تحدّث بالفعل عند إطلاق popstate. اقرأ location.pathname وlocation.search وlocation.hash لمعرفة عنوان URL الجديد. وبالاقتران مع الحالة، توفر هذه القيم كل المعلومات اللازمة لعرض العرض الوجهة.

تحميل الصفحة الأولي

لا يُطلَق popstate عند تحميل الصفحة لأول مرة — بل عند التنقّل فقط. اعرض العرض الأولي من location عند بدء التشغيل، ثم اترك لـ popstate معالجة التنقّلات اللاحقة. وبدون ذلك، ستصبح الصفحة الأولية فارغة بعد الوصول إليها بأول تنقّل إلى الخلف.

// Initial render
renderPage(location.pathname);
// Future navigation
window.addEventListener("popstate", () => renderPage(location.pathname));

hashchange في مقابل popstate

في التوجيه المعتمد بالكامل على الهاش، أي عناوين URL مثل /#/about، يُطلَق حدث hashchange عند تغيّر الهاش. كما يُطلَق popstate عند تغيّر المسار. تستخدم تطبيقات SPA الحديثة History API وpopstate؛ أما التوجيه بالهاش فأصبح قديمًا.

اعتراض النقرات

لجعل النقر على عنصر <a> عادي يؤدي إلى تنقّل من جانب العميل، اعترض النقر، واستدعِ preventDefault، ثم استدعِ pushState وrenderPage. تحقّق من مفاتيح التعديل، مثل النقر مع Cmd أو Ctrl لفتح علامة تبويب جديدة، واتركها تمر إلى السلوك الافتراضي.

document.addEventListener("click", (e) => {
  const a = e.target.closest("a");
  if (!a || a.target || e.metaKey || e.ctrlKey) return;
  e.preventDefault();
  history.pushState(null, "", a.href);
  renderPage(location.pathname);
});

استعادة موضع التمرير

تحاول المتصفحات استعادة موضع التمرير تلقائيًا عند التنقّل إلى الخلف، لكن ذلك غير موثوق في تطبيقات SPA لأن المحتوى يُعرض بشكل غير متزامن. احفظ موضع التمرير في حالة pushState واستعده في popstate باستخدام: window.scrollTo(0, e.state?.scroll ?? 0).

ملاحظة حول العرض غير المتزامن

إذا كان renderPage يجلب البيانات بشكل غير متزامن، فسيتحدّث عنوان URL قبل وصول المحتوى. اعرض حالة تحميل، ثم اعرض المحتوى. تجنّب حالات التسابق التي ينقر فيها المستخدم على زر الرجوع أثناء الجلب، ثم تستبدل نتيجة الجلب المُلغى العرض الجديد.

أجهزة التوجيه في أطر العمل

تغلّف أجهزة توجيه React Router وVue Router وجهاز توجيه SvelteKit كلًا من History وpopstate. وحتى من دون إطار عمل، تظل الآلية الأساسية نفسها — الاستماع إلى popstate، واعتراض الروابط، واستدعاء pushState. ويمكنك كتابة جهاز توجيه خاص بك في نحو 50 سطرًا من JavaScript الخالص عندما تكون النفقات الإضافية مهمة.

مشكلة شائعة: تسرّب الذاكرة

قد يضيف إعداد كل عرض مستمعي أحداث ومؤقتات. ومن دون إزالة صريحة لها عند تغيّر العرض، سواء في popstate أو في الغلاف المحيط بـ pushState، تتراكم المستمعات ويتراجع الأداء بمرور الوقت. تتبّع الاشتراكات الخاصة بكل عرض باستخدام AbortController وألغِها عند تغيّر العرض.

اختبار المعرفة

لماذا لا يُطلَق حدث popstate عند استدعاء history.pushState بنفسك؟

ملخص

يُطلَق popstate عند التنقّل إلى الخلف أو إلى الأمام باستخدام المتصفح، مما يتيح الوصول إلى الحالة المحفوظة والموقع الجديد. ولا يُطلَق عند pushState أو replaceState، لأن كودك يعرف بذلك مسبقًا، ولا عند تحميل الصفحة لأول مرة، إذ يجب العرض يدويًا. اعترض نقرات الروابط للتنقّل في SPA، واحفظ موضع التمرير في الحالة، وأزل المستمعات عند تغيّر العرض لمنع التسرّبات.

الأسئلة الشائعة

هل درس «حدث popstate» مجاني؟

نعم — نص درس «حدث popstate» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «حدث popstate»؟

الاستجابة للتنقل إلى الخلف والأمام في المتصفح تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «حدث popstate»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy