بررسی آبجکت location در جاوا اسکریپت

در این مطلب با همدیگه یکی از پر کاربرترین اشیاء (Object) جاوا اسکریپت را که اطلاعاتی در رابطه با URL کنونی صفحه به ما می دهد، مورد بررسی قرار می دهیم.

پیش نیاز:

• آشنایی با جاوا اسکریپت به صورت مقدماتی

بعد از مطالعه چه چیزی یاد می گیرم.

• می توانید کاربر را به URL های مختلف هدایت کنید.
• پورت URL را تغییر دهید.
• کوئری استرینگ URL را تغییر دهید.
• می توانید Id Anchor URL را تغییر دهید.
• و . . .

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

location;
window. location;
window. document. location;

در طول این مقاله فرض می کنیم که آدرس صفحه مورد بررسی

https://virgool.io:443/@DanialRahimy/بررسی-آبجکت-location-در-جاوا-اسکریپت-wtc1aruffvhb?param=value#identifier

است.

در ابتدا به بررسی Property های شئ location می پردازیم و سپس Method های آن را بررسی می کنیم.

بررسی Property ها

بررسی location.href

این Property شامل آدرس کامل صفحه فعلی کاربر می باشد که در اینجا به صورت زیر است.

console.log(location.href)
// خروجی زیر را نمایش می دهد
// https://virgool.io/@DanialRahimy/بررسی-آبجکت-location-در-جاوا-اسکریپت-wtc1aruffvhb?param=value#identifier

این Property قابل ویرایش است که در صورت ویرایش کاربر به صفحه مورد نظر هدایت می شود. مانند زیر می توان آن را جایگزین کرد.

location.href = &quothttps://www.linkedin.com/in/danial-rahimy&quot

اکنون کاربر به آدرس https://www.linkedin.com/in/danial-rahimy هدایت می شود.

بررسی location.protocol

همانطور که از نامش مشخص است پروتکل ارتباطی را نمایش می دهد که شامل : پایانی نیز می باشد.

console.log(location.protocol)
// خروجی زیر را نمایش می دهد
// https:

این Property نیز قابل ویرایش است و در صورت وارد کردن پروتکل معتبر، کاربر به آن آدرس هدایت می شود. می توان به صورت زیر کاربر را به نسخه http هدایت کرد اما ممکن است پیاده سازی سایت به صورتی باشد که کاربر همیشه به https هدایت شود پس شاید بررسی صحت این موضوع کار دشواری باشد.

location.protocol = &quothttp:&quot

اکنون کاربر به آدرس

 http://virgool.io/@DanialRahimy/بررسی-آبجکت-location-در-جاوا-اسکریپت-wtc1aruffvhb?param=value#identifier

هدایت می شود.

بررسی location.hostname

این Property آدرس کامل دامنه (در صورت وجود به همراه subdomain) نمایش می دهد.

console.log(location.hostname)
// خروجی زیر را نمایش می دهد
// virgool.io

این Property نیز قابل ویرایش است و در صورت ویرایش مقدار location.hostname در آدرس URL جایگزین می شود و باقی آدرس از URL مانند قبل باقی ماند. به کد زیر توجه کنید.

location.hostname = &quottest.com&quot

اکنون کاربر به

https://test.com/@DanialRahimy/بررسی-آبجکت-location-در-جاوا-اسکریپت-wtc1aruffvhb?param=value#identifier

هدایت می شود چون مقدار location.hostname قبلی virgool.io بود و فقط همین مقدار با test.com جایگزین می شود که نتیجه آن هدایت کاربر به آدرس بالا است.

بررسی location.port

این Property شماره پورت را نمایش می دهد.

console.log(location.port)
// خروجی زیر را نمایش می دهد
// 443

این Property نیز قابل ویرایش است و در صورت ویرایش مقدار location.port در آدرس URL جایگزین می شود و باقی آدرس از URL مانند قبل باقی ماند. به کد زیر توجه کنید.

location.port = 8080

اکنون کاربر به

https://virgool.io:8080/@DanialRahimy/بررسی-آبجکت-location-در-جاوا-اسکریپت-wtc1aruffvhb?param=value#identifier

هدایت می شود چون مقدار location.port قبلی 443 بود و فقط همین مقدار با 8080 جایگزین می شود که نتیجه آن هدایت کاربر به آدرس بالا است. چون این برای پورت از طرف سرور سایت مورد نظر که در این جا ویرگول است پاسخی دریافت نمی شود. محتوایی نیز جهت نمایش وجود ندارد.

بررسی location.host

این Property آدرس کامل دامنه (در صورت وجود به همراه sub domain) به همراه پورت را نمایش می دهد.

console.log(location.host)
// خروجی زیر را نمایش می دهد 
// virgool.io:443

این Property نیز قابل ویرایش است و در صورت ویرایش مقدار location.host آدرس URL جایگزین می شود و باقی آدرس از URL مانند قبل باقی ماند. نکته قابل توجه در این مورد این است که می توان فقط مقدار port یا فقط مقدار location.hostname و یا همچنین می توان هر دو را تغییر داد. به کد زیر توجه کنید.

location.host = &quottest.com:8080&quot
// تغییر پورت و نام هاست
// کاربر به آدرس زیر هدایت می شود
// https://test.com:8080/@DanialRahimy/بررسی-آبجکت-location-در-جاوا-اسکریپت-wtc1aruffvhb?param=value#identifier

بررسی location.search

در این Property مقدار query string موجود در URL ذخیره شده است.

console.log(location.search)
// خروجی زیر را نمایش می دهد
// ?param=value

این Property نیز قابل ویرایش است و در صورت ویرایش مقدار location.search آدرس URL جایگزین می شود و باقی آدرس از URL مانند قبل باقی ماند. به کد زیر توجه کنید.

location.search = &quot?name=DanialRahimy&quot

اکنون کاربر به

https://virgool.io:443/@DanialRahimy/بررسی-آبجکت-location-در-جاوا-اسکریپت-wtc1aruffvhb?name=DanialRahimy#identifier

هدایت می شود چون مقدار location.search قبلی

?param=value

بود و فقط همین مقدار با

?name=DanialRahimy

جایگزین می شود که نتیجه آن هدایت کاربر به آدرس بالا است.

بررسی location.hash

مقدار این Property شامل # به همراه id anchor است.

console.log(location.hash)
// خروجی زیر را نمایش می دهد
// #identifier

این Property نیز قابل ویرایش است و در صورت ویرایش مقدار location.hash آدرس URL جایگزین می شود و باقی آدرس از URL مانند قبل باقی ماند. به کد زیر توجه کنید.

location.hash = &quot#DanialRahimy&quot

اکنون کاربر به

https://virgool.io:443/@DanialRahimy/بررسی-آبجکت-location-در-جاوا-اسکریپت-wtc1aruffvhb?param=value#DanialRahimy

هدایت می شود چون مقدار location.hash قبلی که در انتهای آدرس قرار دارد

#identifier

بود و فقط همین مقدار با

#DanialRahimy

جایگزین می شود که نتیجه آن هدایت کاربر به آدرس بالا است.

بررسی Method ها

بررسی ()location.assign

این متد یک ورودی string دریافت می کند که کاربر به آن صفحه هدایت می شود. مانند جایگزینی مقدار location.href عمل می کند.

location.assign(&quothttps://www.linkedin.com/in/danial-rahimy&quot)

اکنون کاربر به آدرس https://www.linkedin.com/in/danial-rahimy هدایت می شود.

بررسی متد ()location.reload

با فراخوانی این متد صفحه رفرش می شود.

location.reload()

بررسی متد ()location.replace
کاربرد این متد مانند ()location.assign و location.href است. با این تفاوت که URL کنونی کاربر در تاریخچه ذخیره نمی شود و با زدن دکمه Back در مرورگر امکان بازگشت به صفحه فعلی را ندارد.

location.replace(&quothttps://www.linkedin.com/in/danial-rahimy&quot)

اکنون کاربر به آدرس https://www.linkedin.com/in/danial-rahimy هدایت می شود.

بررسی متد ()location.toString

این متد مقدار location.href را بر میگرداند.

console.log(location.toString())
// خروجی زیر را نمایش می دهد
// https://virgool.io:443/@DanialRahimy/بررسی-آبجکت-location-در-جاوا-اسکریپت-wtc1aruffvhb?param=value#identifier

سازگاری مرورگرها

در این قسمت میخواهیم سازگاری و پشتیبانی مرورگر ها برای Property ها و Method های location را مورد بررسی قرار دهیم. جزئیات این موارد در جدول زیر قابل مشاهده است.

بیشتر بخوانید:

https://developer.mozilla.org/en-US/docs/Web/API/Location

https://www.w3schools.com/js/js_window_location.asp

سخن پایانی

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

امیدارم آموزش خوبی براتون بوده باشه و کمکی جهت آشنایی بیشتر با جاوا اسکریپت و همچنین برنامه نویسی شده باشه.

اگر ابهامی در هر کدام از قسمت های کد دارید در نظرات بفرمایید تا توضیح بیشتری بدم.

ممنون میشم نظراتتون رو با من درمیون بزارید تا بتونم محتواهای با کیفیت تری تولید کنم که برای من به عنوان نویسنده و برای شما به عنوان خواننده مفید باشه.

می تونید در تلگرام با من در ارتباط باشید:

https://t.me/DanialRahimy

@DanialRahimy