JavaScript

JavaScript Window Location Object
خاصية location مع كائن window في لغة جافا سكريبت

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

التاريخ

26 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1614

المواضيع

24
الشروحات chevron_left JavaScript Window Location Object chevron_left JavaScript

JavaScript Window Location
خاصية location مع كائن window في لغة جافا سكريبت

</> JavaScript Window Location
خاصية location مع كائن window في لغة جافا سكريبت

كائن window.location في لغة جافا سكريبت يُمثل عنوان صفحة الويب الحالية. يمكن استخدامه للحصول على عنوان URL الحالي لصفحة الويب ، أو يمكن استخدامه في إعادة توجيه المتصفح إلى صفحة جديدة ، وتحديث الصفحة الحالية.


خصائص كائن window location في لغة جافا سكريبت:

  • window.location.href لقراءة عنوان URL للصفحة الحالية.
  • window.location.hostname لقراءة اسم الدومين لموقع الويب الحالي domain name.
  • window.location.search لقراءة سلسلة الاستعلام الخاصة بعنوان URL الحالي.
  • window.location.pathname لقراءة مسار واسم الملف الحالي لصفحة الويب.
  • window.location.protocol لقراءة بروتوكول نقل البيانات اذا كان http او https.
  • window.location.assign() لتحويل الصفحة الحالية الي صفحة ويب جديدة.
يمكن استخدام خاصية location بدون كائن Window في لغة جافا سكريبت.

</> Getting the current URL in JavaScript
قراءة URL رابط الصفحة الحالية في لغة جافا سكريبت

تُستخدم خاصية window.location.href في لغة جافا سكريبت للحصول على عنوان URL الحالي لصفحة الويب ، تقوم هذه الخاصية بإرجاع عنوان URL الكامل للصفحة ، بما في ذلك بروتوكول نقل المعلومات (مثل http أو https) واسم الدومين ومسار الصفحة.

Result

URL will display here

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

Getting the current URL in JavaScript window location href

قراءة URL بالكامل في لغة جافا سكريبت بواسطة window location href.

<!DOCTYPE html>
<html>
<body>
<h1>Getting the current URL in JavaScript</h1>
<p id="url">URL will display here<p>
<script>
let url = document.getElementById('url');
url.innerHTML = "Full URL is <br/>" + window.location.href;
</script>
</body>
</html>
location href without window in JavaScript

قراءة URL بالكامل في لغة جافا سكريبت بواسطة location href بدون كائن window.

let url = document.getElementById('url');
url.innerHTML = "Full URL is <br/>" + location.href;

</> JavaScript Window Location Hostname
خاصية Hostname مع كائن location في لغة جافا سكريبت

تُستخدم خاصية window.location.hostname في لغة جافا سكريبت لتقوم بقراءة وإرجاع اسم domain الدومين الخاص بموقع الويب الحالي.


يتم إرجاع الرابط علي هيئة URL يشمل ثلاث أجزاء:

  • sub domain وهو مثل www.
  • domain name مثل closetag.
  • domain extension مثل com. 

Result

URL will display here

جربها بنفسك chevron_right

يظهر الكود بهذا الشكل على المتصفح

JavaScript Window Location Hostname

قراءة أسم الدومين بواسطة Window Location Hostname في لغة جافا سكريبت

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Window Location Hostname</h1>
<p id="host">URL will display here<p>
<script>
let host = document.getElementById('host');
host.innerHTML = "URL is <br/>" + window.location.hostname;
</script>
</body>
</html>
JavaScript Window Location Hostname

قراءة أسم الدومين بواسطة Window Location Hostname في لغة جافا سكريبت

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Window Location Hostname</h1>
<p id="host">URL will display here<p>
<script>
let host = document.getElementById('host');
host.innerHTML = "URL is <br/>" + window.location.hostname;
</script>
</body>
</html>

</> Getting search queries from URL in JavaScript
قراءة عوامل البحث من عنوان URL عن طريق خاصية search في لغة جافا سكريبت

تًستخدم خاصية window.location.search في لغة جافا سكريبت لتوم بقراءة جزء من عنوان URL وهو الجزء الخاص بالاستعلام وهو يبدأ بـعلامة استفهام ؟ ثم تتبعها سلسلة علي هيئة key=value وكون الفاصل بين كل key واخر بعلامة &.

JavaScript window location search

الجزء الذي سوف يتم قراته هو ?course=html&language=arabic من عنوان URL بواسطة خاصية window location search في لغة جافا سكريبت.

https://www.closetag.com/?course=html&language=arabic
JavaScript window location search

قراءة عوامل البحث من عنوان URL عن طريق خاصية search في لغة جافا سكريبت.

<!DOCTYPE html>
<html>
<body>
<h1>Getting search queries from URL in JavaScript</h1>
<p id="host">URL will display here<p>
<a id="query" href="https://www.closetag.com/?course=html&language=arabic">
https://www.closetag.com/?course=html&language=arabic</a>
<script>
let host = document.getElementById('host');
let query = document.getElementById('query');
host.innerHTML = "URL is <br/>" + query.search;
</script>
</body>
</html>
Update search queries from URL in JavaScript

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

<script>
let host = document.getElementById('host');
let query = document.getElementById('query');
query.search = "?course=css&language=englsih";
host.innerHTML = "URL is <br/>" + query.search;
</script>

</> Getting page path from URL in JavaScript
قراءة مسار الصفحة الحالية من عنوان URL عن طريق خاصية pathname في لغة جافا سكريبت

تُستخدم خاصية window.location.pathname في لغة جافا سكريبت بقراءة عنوان ومسار الصفحة الحالية من عنوان URL الكامل وهذا الجزء الذي يتم قراءة يمثل موقع الصفحة الحالية على الخادم ، ويبدأ بحرف /.
Getting page path from URL in JavaScript

قراءة مسار الصفحة الحالية من عنوان URL عن طريق خاصية pathname في لغة جافا سكريبت الجزء الذي يتم قراءته هو "tutorial/javascript/javascript-window-location/getting-page-path-from-url-in-javascript/".

https://www.closetag.com/tutorial/javascript/javascript-window-location/getting-page-path-from-url-in-javascript
Getting page path from URL in JavaScript

قراءة مسار الصفحة الحالية من عنوان URL عن طريق خاصية pathname في لغة جافا سكريبت.

<!DOCTYPE html>
<html>
<body>
<h1>Getting page path from URL in JavaScript</h1>
<p id="path">URL will display here<p>
<script>
let path = document.getElementById('path');
path.innerHTML = "Page path is <br/>" + window.location.pathname;
</script>
</body>
</html>
Update page path in JavaScript

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

<script>
let path = document.getElementById('path');
window.location.pathname = "/tutorials"
</script>

</> Getting Page Protocol from URL in JavaScript
قراءة بروتوكول نقل البيانات للصفحة الحالية من عنوان URL في لغة جافا سكريبت.

تُستخدم خاصية window.location.protocol في لغة جافا سكريبت لقراءة بروتوكول نقل البيانات للصفحة الحالية من عنوان URL إذا كان  "http:" أو "https:" أو "ملف:".
Getting Page Protocol from URL in JavaScript
<!DOCTYPE html>
<html>
<body>
<h1>Getting the current URL in JavaScript</h1>
<p id="protocol">URL will display here<p>
<script>
let protocol = document.getElementById('protocol');
protocol.innerHTML = "The page protocol is: <b>" + window.location.protocol + "</b>";
</script>
</body>
</html>
redirect Page Protocol from http to https in JavaScript

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

if (window.location.protocol === "http:") {
  window.location.protocol = "https:";
}

</> Getting Page Port from URL in JavaScript
قراءة رقم المنفذ من عنوان الصفحة الحالية في لغة جافا سكريبت.

تُستخدم خاصية window.location.port في لغة جافا سكريبت لتمثل رقم المنفذ لعنوان URL للصفحة الحالية.
Getting Page Port from URL in JavaScript

قراءة رقم المنفذ من عنوان الصفحة الحالية في لغة جافا سكريبت.

<!DOCTYPE html>
<html>
<body>
<h1>Getting Page Port from URL in JavaScript</h1>
<p>Note: If the port number is default (80 for http and 443 for https), most browsers will display 0 or nothing.</p>
<p id="port">URL will display here<p>
<script>
let port = document.getElementById('port');
port.innerHTML = "The page port is: <b>" + window.location.port + "</b>";
</script>
</body>
</html>
إذا كان رقم المنفذ للصفحة الحالية 80 لبروتوكول http أو 443 لبروتوكول https فأغلب المتصفحات تقرأ رقم صفر أو قد لا تقرأ اي شئ بواسطة خاصية port في لغة جافا سكريبت.

</> loads a new document from the specified URL in JavaScript
تحميل صفحة جديدة بدلاً من الصفحة الحالية في لغة جافا سكريبت

تُستخدم دالة ()window.location.assign في لغة جافا سكريبت لتحميل مستند جديد من عنوان URL المحدد.
loads a new document from the specified URL in JavaScript

تحميل صفحة جديدة بدلاً من الصفحة الحالية في لغة جافا سكريبت.

<!DOCTYPE html>
<html>
<body>
<h1>loads a new document from the specified URL in JavaScript</h1>
<button id="load">Load</button>
<script>
let load = document.getElementById('load');
load.addEventListener('click',()=>{
  window.location.assign("https://www.closetag.com")
});
</script>
</body>
</html>

</> Refreshing the page in JavaScript
تحديث وإعادة تحميل الصفحة الحالية في لغة جافا سكريبت

لتحديث الصفحة الحالية ، يمكنك استخدام دالة ()window.location.reload . تعيد هذه الطريقة تحميل الصفحة الحالية من الخادم، بدلاً من تحميلها من ذاكرة التخزين المؤقت.
يمكن أيضًا تمرير عامل إلى دالة ()reload لإجبار المتصفح على إعادة تحميل الصفحة من الخادم ، مع تجاهل أي نسخ مخزنة في المتصفح cash.
window.location.reload(); // Reload from cache
window.location.reload(true); // Reload from server
Refreshing the page from cash in JavaScript

إعادة تحميل الصفحة الحالية من المتصفح أو من النسخة المٌخزنة في المتصفح عن طريق دالة reload في لغة جافا سكريبت.

<!DOCTYPE html>
<html>
<body>
<h1>loads a new document from the specified URL in JavaScript</h1>
<button id="reload">Reload</button>
<script>
let reloady = document.getElementById('reload');
reload.addEventListener('click',()=>{
  window.location.reload()
});
</script>
</body>
</html>
Refreshing the page from server in JavaScript

إعادة تحميل الصفحة الحالية من السيرفر أو الخادم أعن طريق دالة reload في لغة جافا سكريبت مع إضافة عامل للدالة true.

<!DOCTYPE html>
<html>
<body>
<h1>loads a new document from the specified URL in JavaScript</h1>
<button id="reload">Reload</button>
<script>
let reloady = document.getElementById('reload');
reload.addEventListener('click',()=>{
  window.location.reload(true)
});
</script>
</body>
</html>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

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