رابط الصفحة في لغة JavaScript
يا هلا بالجميع! اليوم راح نتكلم بشكل سريع وعملي عن كيف نتعامل مع روابط الصفحات والتنقل بينها باستخدام JavaScript. الموضوع بسيط ومهم جداً لأي مطور ويب.
1. إعادة التوجيه لصفحة أخرى (Redirection)
أكثر طريقة استخداماً لإعادة توجيه المستخدم لصفحة ثانية هي عن طريق الكائن window.location. عندك طريقتين أساسيتين:
أ. استخدام window.location.href
هذه الطريقة تخليك تغير الرابط الحالي للصفحة. كأنك كتبت الرابط في شريط العنوان وضغطت Enter.
window.location.href = 'https://www.example.com/new-page.html';
// أو
window.location.href = '/another-relative-page.html';ملاحظة: هذه الطريقة تضيف الصفحة الجديدة لسجل المتصفح (history)، يعني المستخدم يقدر يرجع للصفحة السابقة باستخدام زر الرجوع.
ب. استخدام window.location.assign()
تقريباً نفس href، لكنها دالة صريحة لإعادة التوجيه.
window.location.assign('https://www.example.com/another-page.html');ملاحظة: أيضاً هذه الطريقة تضيف الصفحة لسجل المتصفح، تماماً مثل
href.
2. استبدال الصفحة الحالية بدون سجل (Replace Current Page)
لو تبغى تنتقل لصفحة جديدة لكن ما تبغى المستخدم يقدر يرجع للصفحة القديمة بزر الرجوع، استخدم window.location.replace().
window.location.replace('https://www.example.com/no-back-button-page.html');ملاحظة مهمة: هذه الدالة تحذف الصفحة الحالية من سجل المتصفح وتستبدلها بالصفحة الجديدة. مفيدة جداً بعد عمليات تسجيل الدخول مثلاً عشان ما يقدر المستخدم يرجع لصفحة تسجيل الدخول وهو مسجل دخوله.
3. إعادة تحميل الصفحة (Reload Page)
لو احتجت تسوي ريفريش للصفحة الحالية، استخدم window.location.reload().
window.location.reload();
// لإعادة التحميل من السيرفر وليس الكاش:
// window.location.reload(true); // هذا الخيار صار مهمل في المتصفحات الحديثة، عادة المتصفح يقرر بنفسه.4. الحصول على أجزاء من رابط الصفحة (Getting URL Parts)
الكائن window.location مو بس للتحكم، تقدر تستخدمه عشان تاخذ معلومات عن الرابط الحالي. مثلاً:
// الرابط الحالي: https://www.example.com:8080/path/to/page?id=123&name=test#section1
console.log(window.location.href); // 'https://www.example.com:8080/path/to/page?id=123&name=test#section1' (الرابط كامل)
console.log(window.location.protocol); // 'https:' (البروتوكول)
console.log(window.location.host); // 'www.example.com:8080' (المضيف والمنفذ)
console.log(window.location.hostname); // 'www.example.com' (اسم المضيف فقط)
console.log(window.location.port); // '8080' (المنفذ)
console.log(window.location.pathname); // '/path/to/page' (المسار)
console.log(window.location.search); // '?id=123&name=test' (الاستعلامات بعد علامة الاستفهام)
console.log(window.location.hash); // '#section1' (الهاش بعد علامة #)5. التنقل في سجل المتصفح (Browser History)
الكائن history يخليك تتحكم بسجل المتصفح (مثل أزرار الرجوع والأمام).
أ. الرجوع للخلف (Go Back)
للرجوع للصفحة السابقة في سجل المتصفح:
history.back();
// أو
history.go(-1);ب. التقدم للأمام (Go Forward)
للتقدم للصفحة التالية (إذا كان المستخدم قد رجع للخلف من قبل):
history.forward();
// أو
history.go(1);ج. الانتقال لخطوة معينة (Go to Specific Step)
تقدر تنتقل لأي عدد من الخطوات للأمام أو الخلف:
history.go(2); // يتقدم صفحتين
history.go(-3); // يرجع ثلاث صفحاتأتمنى يكون الشرح واضح ومفيد! هذه الأدوات الأساسية اللي تحتاجها للتحكم بروابط الصفحات والتنقل في JavaScript.