JavaScript Window Location Object
خاصية location مع كائن window في لغة جافا سكريبت
سوف تتعلم في هذا الدرس كيفية التنقل من خلال النافذة الحالية الي عناوين ويب كصفحات داخلية او روابط خارجية عن طريق كائن window.location في لغة جافا سكريبت.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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() لتحويل الصفحة الحالية الي صفحة ويب جديدة.
</>
Getting the current URL in JavaScript
قراءة URL رابط الصفحة الحالية في لغة جافا سكريبت
تُستخدم خاصية window.location.href في لغة جافا سكريبت للحصول على عنوان URL الحالي لصفحة الويب ، تقوم هذه الخاصية بإرجاع عنوان URL الكامل للصفحة ، بما في ذلك بروتوكول نقل المعلومات (مثل http أو https) واسم الدومين ومسار الصفحة.
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.
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 في لغة جافا سكريبت
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 في لغة جافا سكريبت.
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
قراءة رقم المنفذ من عنوان الصفحة الحالية في لغة جافا سكريبت.
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>
</>
loads a new document from the specified URL in JavaScript
تحميل صفحة جديدة بدلاً من الصفحة الحالية في لغة جافا سكريبت
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 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>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
