آموزش جاوا اسکریپت – شیء location در جاوا اسکریپت

در این بخش از سری آموزش جاوا اسکریپت قصد داریم درباره شیء location صحبت کنیم.

شیء location

خصوصیت location از window یک رفرنس به آبجکت location است که نشان دهنده آدرس URL فعلی از سندی که در پنجره مرورگر نمایش داده می شود, است.

از آنجا که شیء window در بالای زنجیره اسکوپ است, بنابراین خصوصیات window.location می توانند بدون پیشوند window. قابل دسترس باشند.

برای مثال, به جای window.location.href می توانید location.href بنویسید.

بخش زیر به شما نحوه دریافت URL صفحه مثل نام هاست, پروتکل و غیره.. را با آبجکت location از window نشان می دهد.

دریافت آدرس URL صفحه فعلی

می توانید از خصوصیت window.location.href برای دریافت کل URL صفحه فعلی استفاده کنید.

مثال زیر به شما یک آدرس کامل از صفحه فعلی را را کلیک روی دکمه نشان می دهد:

<script>
function getURL() {
    alert("The URL of this page is: " + window.location.href);
}
</script>
 
<button type="button" onclick="getURL();">Get Page URL</button>

function getURL() {

alert("The URL of this page is: " + window.location.href);

}

</script>

دریفات بخش های مختلف URL

مشابه آن, می توانید از خصوصیات protocol, hostname, port, pathname, search در شیء location برای دریافت بخش های مختلف URL استفاده کنید.

حالا هر یک از بخش ها را بصورت زیر دریافت می کنیم که توضیحات و مثال آن را نیز بصورت کامنت قرار دادیم:

// Prints complete URL
document.write(window.location.href);
  
// Prints protocol like http: or https:
document.write(window.location.protocol); 
 
// Prints hostname with port like localhost or localhost:3000
document.write(window.location.host);
  
// Prints hostname like localhost or www.example.com
document.write(window.location.hostname);
 
// Prints port number like 3000
document.write(window.location.port);
  
// Prints pathname like /products/search.php
document.write(window.location.pathname); 
 
// Prints query string like ?q=ipad
document.write(window.location.search);
 
// Prints fragment identifier like #featured
document.write(window.location.hash);

// Prints complete URL

document.write(window.location.href);

// Prints protocol like http: or https:

document.write(window.location.protocol);

// Prints hostname with port like localhost or localhost:3000

document.write(window.location.host);

// Prints hostname like localhost or www.example.com

document.write(window.location.hostname);

// Prints port number like 3000

document.write(window.location.port);

// Prints pathname like /products/search.php

document.write(window.location.pathname);

// Prints query string like ?q=ipad

document.write(window.location.search);

// Prints fragment identifier like #featured

document.write(window.location.hash);

نکته: زمانی که یک وبسایت را مشاهده میکنید, همیشه به یک پورت خاص (مثلا http://localhost:3000) متصل می شوید. بنابراین بیشتر مرورگرها به سادگی پورت پیش فرض را نشان نمی دهند. برای مثا ۸۰ برای http و ۴۴۳ برای https.

بارگذاری سند جدید

می توانید از متد assign() از آبجکت location برای دسترسی به یک منبع دیگر از url به همراه یک پارامتر هم استفاده کنید:

<script>
function loadHomePage() {
    window.location.assign("https://netparadis.com");
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

function loadHomePage() {

window.location.assign("https://netparadis.com");

}

</script>

همچنین می توانید از replace() برای لود کردن یک سند جدید که تقریبا شبیه assign() است بهره ببرید.

فرق آنها این است که ردی در تاریخچه صفحات باز شده مرورگر به جا نمی ذارند به این معنی که کاربر نمی تواند با دکمه برگشت به صفحه قبلی برگردد

<script>
function loadHomePage(){
    window.location.replace("https://www.tutorialrepublic.com");
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

function loadHomePage(){

window.location.replace("https://www.tutorialrepublic.com");

}

</script>

جایگزین آن, می توانید از خصوصیت window.location.href برای بارگذاری یک سند جدید در پنجره مرورگر استفاده کنید و کار مشابه assign() را انجام می دهد .

<script>
function loadHomePage() {
    window.location.href = "https://www.tutorialrepublic.com";
}
</script>
 
<button type="button" onclick="loadHomePage();">Load Home Page</button>

function loadHomePage() {

window.location.href = "https://www.tutorialrepublic.com";

}

</script>

بارگذاری مجدد صفحه بصورت داینامیک

متد reload() می تواند برای رفرش مجدد صفحه استفاده شود.

این گزینه بصورت اختیاری می تواند یک پارامتر true یا false دریافت کند. اگر پارامتر true باشد, متد مورد نظر مرورگر را مجبور می کند که این صفحه را مجددا از سرور بارگذاری کنید. اگر false یا حتی مشخص نشده باشد مرورگر صفحه فعلی را از کش cache بارگذاری می کند.

<script>
function forceReload() {
    window.location.reload(true);
}
</script>
 
<button type="button" onclick="forceReload();">Reload Page</button>

function forceReload() {

window.location.reload(true);

}

</script>

<button type="button" onclick="forceReload();">Reload Page</button>

نکته: نتیجه فراخوانی متد reload() متفاوت از کلیک روی دکمه Reload/Refresh مرورگر است. متد reload() مقدار کنترل فرم را پاک می کند درحالیکه کلیک روی دکمه های خود مرورگر همان اطلاعات را دوباره ارسال می کند.

امیدوارم از آموزش شیء location در جاوا اسکریپت نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.