جافاسكربترابط الصفحة

ما هو الكائن window.location؟

الكائن window.location يحتوي على معلومات الوصول إلى الصفحة المفتوحة مثل رابط الصفحة كاملاً، البروتوكول المستخدم لطلب الصفحة، مسار الصفحة في الموقع، إسم الموقع أو الدومين الذي توجد عليه الصفحة، كلمات الإستعلام المدخلة في الرابط، بالإضافة إلى إسم المعرف لعنصر محدد في الصفحة.

إذاً بواسطة هذا الكائن يمكنك استخراج جميع المعلومات الموجودة في رابط الصفحة التي يتصفحها المستخدم كما يلي.

الحصول على رابط الصفحة

يمكنك استخدام الخاصية window.location.href للحصول على رابط الصفحة الحالية كاملاً.

في المثال التالي قمنا بعرض رابط الصفحة الحالية.

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');

// demo هنا قمنا بعرض رابط الصفحة كاملاً في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page url: ' + window.location.href;

الحصول على البروتوكل المذكور في رابط الصفحة

يمكنك استخدام الخاصية window.location.protocol للحصول على البروتوكل الموجود في بداية رابط الصفحة الحالية.
البروتوكل قد يكون 'http' أو 'https' على حسب إعدادات الموقع.

في المثال التالي قمنا بعرض البروتوكل المستخدم لجلب الصفحة.

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');

// demo هنا قمنا بعرض البروتوكل المستخدم لجلب الصفحة في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page url: ' + window.location.protocol;

الحصول على إسم الدومين المذكور في رابط الصفحة

يمكنك استخدام الخاصية window.location.hostname للحصول على إسم الدومين (أي إسم الموقع) من رابط الصفحة الحالية.

في المثال التالي قمنا بعرض إسم الدومين الذي توجد فيه الصفحة.

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');

// demo هنا قمنا بعرض إسم الدومين الذي توجد فيه الصفحة في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page hostname: ' + window.location.hostname;

الحصول على رقم البورت المذكور في رابط الصفحة

يمكنك استخدام الخاصية window.location.port للحصول على رقم البورت ( Port ) الذي يظهر في رابط الصفحة.
في حال لم يكن رقم البورت ظاهراً في الرابط فإنها تعطينا نص فارغ ''.

في المثال التالي قمنا بعرض رقم البورت المستخدم لجلب الصفحة.

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');

// demo هنا قمنا بعرض رقم البورت المستخدم لجلب الصفحة في العنصر الذي يمثله المتغير
// و النتيجة ستكون نص فارغ لأن رقم البورت الإفتراض للصفحة هو 443 و المتصفح لا يظهره
demo.innerHTML = 'Page port: ' + window.location.port;

الحصول على إسم الدومين مع رقم البورت المذكورين في رابط الصفحة

يمكنك استخدام الخاصية window.location.host للحصول على إسم الدومين و رقم البورت اللذان يظهران في رابط الصفحة الحالية.

في المثال التالي قمنا بعرض إسم الدومين مع رقم البورت المستخدم لجلب الصفحة.

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');

// هنا قمنا بعرض إسم الدومين مع رقم البورت في حال كان
// demo ظاهراً في المتصفح في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page host: ' + window.location.host;

الحصول على مسار الصفحة الحالية

يمكنك استخدام الخاصية window.location.pathname للحصول على مسار الصفحة الحالية المذكور في رابط الصفحة.

في المثال التالي قمنا بعرض مسار الصفحة المذكور في رابطها.

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');

// demo هنا قمنا بعرض مسار الصفحة المذكور في رابطها في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page pathname: ' + window.location.pathname;

الحصول على جملة البحث المذكورة في رابط الصفحة

يمكنك استخدام الخاصية window.location.search للحصول على جملة البحث المذكورة في رابط الصفحة الحالية.

في المثال التالي قمنا بعرض جملة البحث المذكورة في رابط الصفحة.

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');

// هنا قمنا بعرض جملة البحث (الباراميترات و القيم) المذكورة
// demo في رابط الصفحة في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page search: ' + window.location.search;

الحصول على المعرّف المذكور في رابط الصفحة

يمكنك استخدام الخاصية window.location.hash للحصول على المعرّف المذكور في رابط الصفحة الحالية.
في حال لم يكن رابط الصفحة يحتوي على إسم معرّف تعطينا نص فارغ ''.

في المثال التالي قمنا بعرض إسم المعرّف المذكور في رابط الصفحة.

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');

// demo هنا قمنا بعرض المعرّف المذكور في رابط الصفحة في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page hash: ' + window.location.hash;

الإنتقال لصفحة جديدة

يمكنك استخدام الخاصية window.location.href أو الدالة window.location.assign() للإنتقال إلى صفحة جديدة.

في المثال التالي قمنا بالإنتقال إلى صفحة جديدة من خلال تمرير رابط الصفحة كقيمة للخاصية window.location.href.

// هنا قمنا بالإنتقال إلى الصفحة الرئيسية في موقع هرمش
window.location.href = 'https://harmash.com';

في المثال التالي قمنا بالإنتقال إلى صفحة جديدة من خلال تمرير رابط الصفحة للدالة window.location.assign().

// هنا قمنا بالإنتقال إلى الصفحة الرئيسية في موقع هرمش
window.location.assign('https://harmash.com');

تبديل الصفحة بصفحة جديدة

يمكنك استخدام الدالة window.location.replace() لتبديل الصفحة الحالية بصفحة جديدة.

في المثال التالي قمنا بتبديل الصفحة الحالية بصفحة جديدة من خلال تمرير رابط الصفحة الجديدة للدالة window.location.replace().

// هنا قمنا بتبديل الصفحة الحالية بالصفحة الرئيسية في موقع هرمش
window.location.replace('https://harmash.com');

تحديث الصفحة

يمكنك استخدام الدالة window.location.reload() لتحديث الصفحة الحالية.
عند استدعائها يمكنك عدم تمرير أي قيمة لها أو تمرير القيمة false لجعل الصفحة يعاد عرضها بالإعتماد على النسخة السابقة منها المخزنة في المتصفح ( Cached page ). و في حال أردت جلب نسخة جديدة من الصفحة من السيرفر فجيب أن تمرر لها القيمة true.

في المثال التالي قمنا ببناء زر عند النقر عليه يقوم بتحديث الصفحة من السيرفر.

<!-- عند استدعائها تقوم forceReload هنا قمنا بإنشاء دالة إسمها 
بتحديث الصفحة مع الإشارة إلى أننا قمنا بإعادة جلبها من السيرفر -->
<script>
function forceReload() {
    window.location.reload(true);
}
</script>

<!-- forceReload() عند النقر على الزر التالي سيتم إستدعاء -->
<button type="button" onclick="forceReload()">Reload Page</button>