به نام خدا با عرض سلام و وقت بخیر خدمت دوستان گرامی در راستای آموزش جاوا اسکریپت در این جلسه به مبحث 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 صفحه فعلی استفاده نمایید. مثال زیر آدرس کامل صفحه را با کلیک روی دکمه نمایش می دهد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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 استفاده کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!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 ارائه شده به عنوان پارامتر استفاده کنید، برای مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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 است.با این تفاوت که یک ورودی در تاریخچه مرورگر ایجاد نمی کند، به عبارتی دیگر کاربر نمی تواند از دکمه بازگشت برای رفتن به صفحه قبلی استفاده کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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 باشد یا مشخص نشده باشد، مرورگر ممکن است صفحه را از کش خود بارگیری مجدد کند.|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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 در برخی مرورگرها حفظ شوند.
دیدگاهتان را بنویسید