❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

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

  • ما هو الكائن window.location؟
  • الحصول على رابط الصفحة
  • الحصول على البروتوكل المذكور في رابط الصفحة
  • الحصول على إسم الدومين المذكور في رابط الصفحة
  • الحصول على رقم البورت المذكور في رابط الصفحة
  • الحصول على إسم الدومين مع رقم البورت المذكورين في رابط الصفحة
  • الحصول على مسار الصفحة الحالية
  • الحصول على جملة البحث المذكورة في رابط الصفحة
  • الحصول على المعرّف المذكور في رابط الصفحة
  • الإنتقال لصفحة جديدة
  • تحديث الصفحة

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

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

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

Javascript window location object

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

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

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

مثال

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');
// demo هنا قمنا بعرض رابط الصفحة كاملاً في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page url: ' + 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;
// 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;
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var demo = document.getElementById('demo'); // demo هنا قمنا بعرض إسم الدومين الذي توجد فيه الصفحة في العنصر الذي يمثله المتغير demo.innerHTML = 'Page hostname: ' + window.location.hostname;
جرب الكود

في حال استعراض الموقع على سيرفر محلي ( Local Server ) فإن إسم الدومين سيكون '127.0.0.1' أو 'localhost'.

و في حال استعرض الصفحة بشكل مباشر في المتصفح بدون تشغيلها على سيرفر فإن إسم الدومين سيكون نص فارغ '' لأنه بالأساس لا يوجد إسم دومين.

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

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

المستخدم لا يضطر إلى ذكر رقم البورت لأن المتصفح يفعل ذلك عنه بشكل تلقائي أثناء الإتصال بالسيرفر فهو يعلم أن رقم البورت الإفتراضي الذي يتم استخدامه مع البروتوكل HTTP هو 80، و رقم البورت الإفتراضي الذي يتم استخدامه مع البروتوكل HTTPS هو 443.

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

مثال

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

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

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

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

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

مثال

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');
// هنا قمنا بعرض إسم الدومين مع رقم البورت في حال كان
// demo ظاهراً في المتصفح في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page host: ' + 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;
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var demo = document.getElementById('demo'); // demo هنا قمنا بعرض مسار الصفحة المذكور في رابطها في العنصر الذي يمثله المتغير demo.innerHTML = 'Page pathname: ' + window.location.pathname;
جرب الكود

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

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

المقصود بجملة البحث هنا هو الباراميترات و القيم التي يتم تمريرها من الرابط إلى السيرفر و تسمى Query String.
الباراميترات و قيمها يتم تمريرها في الرابط من خلال إضافة علامة إستفهام ? في آخره و ذكرها بعدها مباشرةً.

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

مثال

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

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

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

المعرّف يقصد به id يملكه عنصر في الصفحة.
عند تمرير إسم معرّف لعنصر في الرابط فإننا نضعه في آخر الرابط و نضع قبله الرمز #.

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

مثال

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');
// demo هنا قمنا بعرض المعرّف المذكور في رابط الصفحة في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page hash: ' + 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.href = 'https://harmash.com';
جرب الكود

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

المثال الثاني

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

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

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

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

مثال

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

عند الإنتقال لصفحة جديدة بواسطة الخاصية window.location.href أو الدالة window.location.assign() فإن زر الرجوع إلى الصفحة السابقة يعمل بشكل طبيعي و يعيدك إلى الصفحة السابقة التي كانت مفتوحة قبلها. بينما عند تبديل الصفحة الحالية بواسطة الدالة window.location.replace() بصفحة جديدة فإنه لا يمكن العودة إلى الصفحة السابقة.

تحديث الصفحة

يمكنك استخدام الدالة 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>
<!-- عند استدعائها تقوم forceReload هنا قمنا بإنشاء دالة إسمها بتحديث الصفحة مع الإشارة إلى أننا قمنا بإعادة جلبها من السيرفر --> <script> function forceReload() { window.location.reload(true); } </script> <!-- forceReload() عند النقر على الزر التالي سيتم إستدعاء --> <button type="button" onclick="forceReload()">Reload Page</button>
جرب الكود

تحديث الصفحة بواسطة الدالة window.location.reload() يختلف عن استخدام زر التحديث الموجود في المتصفح، حيث أن التحديث بواسطة هذه الدالة يقوم بحذف أي قيم سابقة تم إدخالها في الحقول الموجودة في الصفحة.

الدرس التالي❯ ❮الدرس السابق