window location در جاوا اسکریپت | ابجکت لوکیشن

به نام خدا با عرض سلام و وقت بخیر خدمت دوستان گرامی در راستای آموزش جاوا اسکریپت در این جلسه به مبحث window location در جاوا اسکریپت ( ابجکت لوکیشن ) خواهیم پرداخت. با ما همراه باشید.

The Location Object

پراپرتی location یک window(یعنی window.location) به معنای ارجاع به یک شی Location می باشد.چیزی که URL فعلی نشان میدهد سندی است که در آن window نمایش داده می شود.

از آنجایی که ابجکت ویندو در محدوده ای قرار دارد که ما می توانیم به پراپرتی های ابجکت window.location بدون window نیز دسترسی داشته باشیم.به عنوان مثال window.location.hrefرا می توان به صورت location.hrefنوشت.بخش زیر به شما نشان می دهد که چگونه می توانید URL صفحه و همچنین نام هاست، پروتکل و …را با استفاده از پراپرتی location object شی window دریافت کنید.

نحوه به دست آوردن URL صفحه

شما می توانید از پراپرتیwindow.location.href برای دریافت کل URL صفحه فعلی استفاده نمایید. مثال زیر آدرس کامل صفحه را با کلیک روی دکمه نمایش می دهد:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Get Current URL</title>
</head>
<body>
    <script>
    function getURL() {
        alert("The URL of this page is: " + window.location.href);
    }
    </script>
     
    <button type="button" onclick="getURL();">Get Page URL</button>
</body>
</html>

نحوه به دست آوردن قسمت های مختلف یک URL

به همین روال، شما می‌توانید از پراپرتی های دیگر ابجکت لوکیشن مانند protocol, hostname, port, pathname, search,.. برای به دست آوردن قسمت‌های مختلف URL استفاده کنید.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Get Different Part of a URL</title>
</head>
<body>
    <script>
    // Prints complete URL
    document.write(window.location.href + "<br>");
      
    // Prints protocol like http: or https:
    document.write(window.location.protocol + "<br>"); 
     
    // Prints hostname with port like localhost or localhost:3000
    document.write(window.location.host + "<br>");
      
    // Prints hostname like localhost or www.example.com
    document.write(window.location.hostname + "<br>");
     
    // Prints port number like 3000
    document.write(window.location.port + "<br>");
      
    // Prints pathname like /products/search.php
    document.write(window.location.pathname + "<br>"); 
     
    // Prints query string like ?q=ipad
    document.write(window.location.search + "<br>");
     
    // Prints fragment identifier like #featured
    document.write(window.location.hash);
    </script>
    <p><strong>Note:</strong> If the URL does not contain a specific component (e.g., port number, and fragment identifier here), it will be set to ''.</p>
</body>
</html>

توجه: هنگامی که از یک وب سایت بازدید می کنید، همیشه به یک پورت خاص وصل می شوید (به عنوان مثال http://localhost:3000). با این حال، اکثر مرورگرها به سادگی شماره پورت های پیش فرض را نشان نمی دهند، به عنوان مثال، 80 برای HTTP و 443 برای HTTPS می باشد.

نحوه بارگیری اسناد جدید

شما می‌توانید از متد ()assign ابجکت لوکیشن ، یعنی ()window.location.assign برای بارگیری منبع دیگری از URL ارائه شده به عنوان پارامتر استفاده کنید، برای مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Load another Resource from a URL</title>
</head>
<body>
    <script>
    function loadHomePage() {
        window.location.assign("https://www.google.com");
    }
    </script>
     
    <button type="button" onclick="loadHomePage();">Load Home Page</button>
    <p><strong>Note:</strong> Open the output in a new tab by clicking the arrow next to "Show Output" button then click the above button to see how it works.</p>
</body>
</html>

همچنین می توانید از متد ()replace برای بارگذاری سند جدید استفاده کنید که تقریباً مشابه ()assign است.با این تفاوت که یک ورودی در تاریخچه مرورگر ایجاد نمی کند، به عبارتی دیگر کاربر نمی تواند از دکمه بازگشت برای رفتن به صفحه قبلی استفاده کند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Replace Current URL with a New URL</title>
</head>
<body>
    <script>
    function loadHomePage(){
        window.location.replace("https://www.tutorialrepublic.com");
    }
    </script>
     
    <button type="button" onclick="loadHomePage();">Load Home Page</button>
    <p><strong>Note:</strong> Open the output in a new tab by clicking the arrow next to "Show Output" button then click the above button to see how it works.</p>
</body>
</html>

شما همچنین، می‌توانید از ویژگیwindow.location.href برای بارگذاری سند جدید در ویندو استفاده کنید. این متد همان عملکرد استفاده از متد ()assign را ایجاد می کند.

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

از متد ()reload می توان برای بارگذاری مجدد صفحه فعلی به صورت پویا استفاده کرد.

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

به عنوان مثال:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Reload a Page Dynamically</title>
</head>
<body>
    <script>
    function forceReload() {
        window.location.reload(true);
    }
    </script>
     
    <button type="button" onclick="forceReload();">Reload Page</button>
    <p><strong>Note:</strong> Open the output in a new tab by clicking the arrow next to "Show Output" button then click the above button to see how it works.</p>
</body>
</html>

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

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

سایر مقالات

Window در جاوا اسکریپت | JavaScript Window

اضافه کردن ، ویرایش یا حذف المنت ها در جاوا اسکریپت | JavaScript DOM Manipulation