Navigation API في المتصفحات الحديثة
استخدام Navigation API لاعتراض عمليات التنقل وتخصيصها
Navigation API في المتصفحات الحديثة درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
بديل حديث
تُعد Navigation API بديلًا أحدث وأكثر قوة من History API. فهي تتعامل مع عمليات التنقّل بوصفها كائنات أساسية يمكن اعتراضها وإلغاؤها وانتظارها — وهذا أقرب إلى الطريقة التي تحتاج بها تطبيقات SPA إلى معالجة التوجيه في عام 2024.
كائن window.navigation
يتيح window.navigation الوصول إلى قائمة الإدخالات والإدخال الحالي وحدث navigate. ويعيد navigation.entries() كل إدخال في السجل الحالي، بينما يمثّل navigation.currentEntry الإدخال النشط. قارن ذلك بالطول غير الشفاف والحالة غير المقروءة في History API.
حدث navigate
استمع إلى navigation.addEventListener("navigate", handler) لاعتراض كل تنقّل داخل المستند نفسه — بما في ذلك نقرات الروابط وإرسال النماذج والتنقّل إلى الخلف أو إلى الأمام والتنقّل البرمجي. ويستبدل هذا الخطاف الواحد مجموعةً متفرقة من اعتراض النقرات ومستمع popstate ومستمعات إرسال النماذج.
navigation.addEventListener("navigate", (e) => {
if (!e.canIntercept) return;
e.intercept({
handler: async () => {
await renderPage(new URL(e.destination.url).pathname);
}
});
});intercept وhandler
يؤدي استدعاء e.intercept({ handler }) إلى تولّي عملية التنقّل. ويعيد المعالج وعدًا؛ وأثناء بقائه معلّقًا، تكون عملية التنقّل «قيد التنفيذ» ويكون عنوان URL قد تحدّث بالفعل. ويوحّد ذلك حالة التسابق التقليدية بين تغيّر عنوان URL وعرض الواجهة.
فحص canIntercept
لا يمكن اعتراض جميع عمليات التنقّل، مثل التنقّل عبر المصادر أو عمليات التنزيل. تحقّق من e.canIntercept قبل استدعاء intercept. وتُعد هذه الحماية الدفاعية المكوّنة من سطر واحد وسيلةً للتمييز بين تنقّل SPA والمغادرة الفعلية إلى مصدر مختلف.
الطريقة navigation.navigate
تبدأ navigation.navigate(url, options) عملية تنقّل برمجية تعادل النقر. ويحتوي الكائن المُعاد على وعدَي committed وfinished، بحيث يمكنك انتظار تغيّر عنوان URL أو اكتمال المعالج بالكامل.
حالة الإدخال والمفاتيح
يملك كل إدخال تنقّل key ثابتًا عبر عمليات إعادة التحميل، وid خاصًا بالجلسة. استخدم المفتاح للحالة المستمرة، مثل مواضع التمرير المحفوظة ومسودات النماذج، واستخدم المعرّف للحالة المؤقتة. أما الحالة الوحيدة في History API فكانت كائنًا غير شفاف.
التنقّل إلى الخلف وإلى الأمام
تُعد navigation.back() وnavigation.forward() غلافين ميسّرين حول traverseTo. وهما يعيدان زوج الوعود نفسه، { committed, finished }، لذا يمكنك انتظار التنقّل إلى الخلف قبل تنفيذ أعمال لاحقة.
إلغاء عمليات التنقّل
إذا نقر المستخدم على رابط ثانٍ بينما لا يزال الرابط الأول قيد العرض، يمكن إلغاء عملية التنقّل الجارية. يستلم المعالج AbortSignal عبر e.signal؛ مرّره إلى استدعاءات fetch حتى يُلغى العمل القديم عند بدء عملية التنقّل الجديدة.
e.intercept({
handler: async () => {
const data = await fetch(url, { signal: e.signal });
renderPage(await data.json());
}
});لماذا لا نستخدم History فحسب؟
تعمل History API، لكنها غير مريحة للاستخدام: فتغييرات الحالة وعرض الواجهة منفصلان، ومعالجة النقرات يدوية، والتنسيق بين المستمعين المتعددين هش، واستعادة موضع التمرير غير مكتملة. صُممت Navigation API لتلبية احتياجات SPA منذ البداية، وتعالج كل واحدة من هذه المشكلات.
دعم المتصفحات
يدعم Chrome وEdge واجهة Navigation API. أما Safari وFirefox فما زالا متأخرين (حتى أوائل عام 2026)؛ لذلك اكتب شيفرة تتحقق من توفر الميزة ("navigation" in window) وتستخدم History + popstate كحل بديل عند عدم توفرها. وتغلف أطر مثل SvelteKit وTanStack Router عملية التحقق هذه مسبقًا.
متى ينبغي اعتمادها؟
في المشروعات الجديدة التي تستهدف جمهورًا يستخدم Chromium أولًا، اعتمدها الآن وتقبّل استخدام الحل البديل المبني على History. أما المواقع العامة التي تستهدف جمهورًا واسعًا، فانتظر حتى يدعمها Safari وFirefox، أو استخدم مكتبة توجيه تعزل الفروق بينهما. واجهة الاستخدام الأبسط تستحق الانتظار.
اختبار المعرفة
ما الميزة الأساسية لحدث navigate في Navigation API مقارنةً بمزيج popstate واعتراض النقرات يدويًا في History API؟
الملخص
توحّد Navigation API عمليات التنقّل في SPA ضمن حدث navigate واحد، مع دلالات الاعتراض والإلغاء، ومفاتيح مستقرة لكل إدخال، وانتظار المعالج غير المتزامن. وهي تستبدل الحلول الترقيعية المكوّنة من History وpopstate واعتراض النقرات. وهي مدعومة حاليًا في متصفحات Chromium؛ لذا تحقّق من توفرها واستخدم History كحل بديل في الشيفرة متعددة المتصفحات إلى أن يلحق بها Safari وFirefox.
الأسئلة الشائعة
هل درس «Navigation API في المتصفحات الحديثة» مجاني؟
نعم — نص درس «Navigation API في المتصفحات الحديثة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «Navigation API في المتصفحات الحديثة»؟
استخدام Navigation API لاعتراض عمليات التنقل وتخصيصها تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «Navigation API في المتصفحات الحديثة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- pushState وreplaceState
- حدث popstate
- التوجيه القائم على Hash في مقابل التوجيه القائم على Path
- Navigation API في المتصفحات الحديثة