رابط الصفحة
ما هو الكائن window.location ؟
الكائن
إذاً بواسطة هذا الكائن يمكنك استخراج جميع المعلومات الموجودة في رابط الصفحة التي يتصفحها المستخدم كما يلي.
الحصول على رابط الصفحة
يمكنك استخدام الخاصية
في المثال التالي قمنا بعرض رابط الصفحة الحالية.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Get Page Link</h1>
<p>You can use the "window.location.href" attribute
to get the link of the current page.</p>
<p id="demo"></p>
<script>
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');
// demo هنا قمنا بعرض رابط الصفحة كاملاً في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page url: ' + window.location.href;
</script>
</body>
</html>الحصول على البروتوكل المذكور في رابط الصفحة
يمكنك استخدام الخاصية
البروتوكل قد يكون
في المثال التالي قمنا بعرض البروتوكل المستخدم لجلب الصفحة.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Get Page Protocol</h1>
<p>You can use the "window.location.protocol" attribute
to get the protocol that has been used to get the page.</p>
<p id="demo"></p>
<script>
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');
// demo هنا قمنا بعرض البروتوكل المستخدم لجلب الصفحة الحالية في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page url: ' + window.location.protocol;
</script>
</body>
</html>الحصول على إسم الدومين المذكور في رابط الصفحة
يمكنك استخدام الخاصية
في المثال التالي قمنا بعرض إسم الدومين الذي توجد فيه الصفحة.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Get Page Hostname</h1>
<p>You can use the "window.location.hostname" attribute
to get the domain name from the page URL.</p>
<p id="demo"></p>
<script>
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');
// demo هنا قمنا بعرض إسم الدومين الذي توجد فيه الصفحة في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page hostname: ' + window.location.hostname;
</script>
</body>
</html>في حال استعراض الموقع على سيرفر محلي ( Local Server ) فإن إسم الدومين سيكون
و في حال استعرض الصفحة بشكل مباشر في المتصفح بدون تشغيلها على سيرفر فإن إسم الدومين سيكون نص فارغ
الحصول على رقم البورت المذكور في رابط الصفحة
يمكنك استخدام الخاصية
في حال لم يكن رقم البورت ظاهراً في الرابط فإنها تعطينا نص فارغ
المستخدم لا يضطر إلى ذكر رقم البورت لأن المتصفح يفعل ذلك عنه بشكل تلقائي أثناء الإتصال بالسيرفر فهو يعلم أن رقم البورت الإفتراضي الذي يتم استخدامه مع البروتوكل HTTP هو 80، و رقم البورت الإفتراضي الذي يتم استخدامه مع البروتوكل HTTPS هو 443.
في المثال التالي قمنا بعرض رقم البورت المستخدم لجلب الصفحة.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Get Page Port</h1>
<p>You can use the "window.location.port" attribute
to get the port number from the page URL.</p>
<p id="demo"></p>
<script>
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');
// demo هنا قمنا بعرض رقم البورت المستخدم لجلب الصفحة في العنصر الذي يمثله المتغير
// و النتيجة ستكون نص فارغ لأن رقم البورت الإفتراض للصفحة هو 443 و المتصفح لا يظهره
demo.innerHTML = 'Page port: ' + window.location.port;
</script>
</body>
</html>الحصول على إسم الدومين مع رقم البورت المذكورين في رابط الصفحة
يمكنك استخدام الخاصية
إذا كان رقم البورت لا يظهر في الرابط فإنها ترجع إسم الدومين فقط مثل الخاصية
في المثال التالي قمنا بعرض إسم الدومين مع رقم البورت المستخدم لجلب الصفحة.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Get Page Host</h1>
<p>You can use the "window.location.host" attribute
to get the hostname + the port number from the page URL.</p>
<p id="demo"></p>
<script>
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');
// هنا قمنا بعرض إسم الدومين مع رقم البورت في حال كان
// demo ظاهراً في المتصفح في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page host: ' + window.location.host;
</script>
</body>
</html>الحصول على مسار الصفحة الحالية
يمكنك استخدام الخاصية
في المثال التالي قمنا بعرض مسار الصفحة المذكور في رابطها.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Get Page Path</h1>
<p>You can use the "window.location.pathname" attribute
to get the path of the page from the page URL.</p>
<p id="demo"></p>
<script>
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');
// demo هنا قمنا بعرض مسار الصفحة المذكور في رابطها في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page pathname: ' + window.location.pathname;
</script>
</body>
</html>الحصول على جملة البحث المذكورة في رابط الصفحة
يمكنك استخدام الخاصية
المقصود بجملة البحث هنا هو الباراميترات و القيم التي يتم تمريرها من الرابط إلى السيرفر و تسمى Query String.
الباراميترات و قيمها يتم تمريرها في الرابط من خلال إضافة علامة إستفهام
في المثال التالي قمنا بعرض جملة البحث المذكورة في رابط الصفحة.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Get Page Parameters And values</h1>
<p>You can use the "window.location.search" attribute
to get the query string that contains all the
parameters and their values from the page URL.</p>
<p id="demo"></p>
<script>
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');
// هنا قمنا بعرض جملة البحث (الباراميترات و القيم) المذكورة
// demo في رابط الصفحة في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page search: ' + window.location.search;
</script>
</body>
</html>الحصول على المعرّف المذكور في رابط الصفحة
يمكنك استخدام الخاصية
في حال لم يكن رابط الصفحة يحتوي على إسم معرّف تعطينا نص فارغ
المعرّف يقصد به
عند تمرير إسم معرّف لعنصر في الرابط فإننا نضعه في آخر الرابط و نضع قبله الرمز
في المثال التالي قمنا بعرض إسم المعرّف المذكور في رابط الصفحة.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Get Page Hash</h1>
<p>You can use the "window.location.hash" attribute
to get the hash name from the page URL.</p>
<p id="demo"></p>
<script>
// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');
// demo هنا قمنا بعرض المعرّف المذكور في رابط الصفحة في العنصر الذي يمثله المتغير
demo.innerHTML = 'Page hash: ' + window.location.hash;
</script>
</body>
</html>الإنتقال لصفحة جديدة
يمكنك استخدام الخاصية
في المثال التالي قمنا بالإنتقال إلى صفحة جديدة من خلال تمرير رابط الصفحة كقيمة للخاصية
المثال الأول
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Redirect To Page</h1>
<p>You can use the "window.location.href" attribute
to get page URL or to redirect to another page.</p>
<p id="demo"></p>
<script>
// هنا قمنا بالإنتقال إلى الصفحة الرئيسية في موقع هرمش
window.location.href = 'https://codafox.blogspot.com/';
</script>
</body>
</html>في المثال التالي قمنا بالإنتقال إلى صفحة جديدة من خلال تمرير رابط الصفحة للدالة
المثال الثاني
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Redirect To Page</h1>
<p>You can use the "window.location.assign" function
to move to another page.</p>
<p id="demo"></p>
<script>
// هنا قمنا بالإنتقال إلى الصفحة الرئيسية في موقع هرمش
window.location.assign('https://codafox.blogspot.com/');
</script>
</body>
</html>تبديل الصفحة بصفحة جديدة
يمكنك استخدام الدالة
في المثال التالي قمنا بتبديل الصفحة الحالية بصفحة جديدة من خلال تمرير رابط الصفحة الجديدة للدالة
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Replace Page</h1>
<p>You can use the "window.location.replace" function
to replace the current page with another one.</p>
<p id="demo"></p>
<script>
// هنا قمنا بتبديل الصفحة الحالية بالصفحة الرئيسية في موقع هرمش
window.location.replace('https://codafox.blogspot.com/');
</script>
</body>
</html>عند الإنتقال لصفحة جديدة بواسطة الخاصية
تحديث الصفحة
يمكنك استخدام الدالة
عند استدعائها يمكنك عدم تمرير أي قيمة لها أو تمرير القيمة
في المثال التالي قمنا ببناء زر عند النقر عليه يقوم بتحديث الصفحة من السيرفر.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Reload Page</h1>
<p>You can use the "window.location.reload" function to reload the page.</p>
<!-- عند استدعائها تقوم forceReload هنا قمنا بإنشاء دالة إسمها
بتحديث الصفحة مع الإشارة إلى أننا قمنا بإعادة جلبها من السيرفر -->
<script>
function forceReload() {
window.location.reload(true);
}
</script>
<!-- forceReload() عند النقر على الزر التالي سيتم إستدعاء -->
<button type="button" onclick="forceReload()">Reload Page</button>
</body>
</html>
<!-- الدالة لن تعمل كما هو متوقع في محرر الويب حيث أنها ستعرض الصفحة كلها من جديد في النتيجة -->تحديث الصفحة بواسطة الدالة