https://virgool.io/js-with-danial-rahimy/feed در این انتشارات، مطالب مرتبط با زبان برنامه نویسی جاوا اسکریپت قرار خواهد گرفت fa 2026-06-17 10:20:30 https://files.virgool.io/upload/publication/3lpxb02rizbf/iq8kqj.png https://virgool.io/js-with-danial-rahimy https://virgool.io/js-with-danial-rahimy/%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C-%D8%A2%D8%A8%D8%AC%DA%A9%D8%AA-location-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-wtc1aruffvhb در این مطلب با همدیگه یکی از پر کاربرترین اشیاء (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/Locationhttps://www.w3schools.com/js/js_window_location.aspسخن پایانیهدف از این مطلب آشنایی شما با ‌دسترسی به URL صفحه و تغییر آن با استفاده از جاوا اسکریپت است. با تمرین این مباحث تسلط خوبی روی این مبحث به دست میارید.امیدارم آموزش خوبی براتون بوده باشه و کمکی جهت آشنایی بیشتر با جاوا اسکریپت و همچنین برنامه نویسی شده باشه.اگر ابهامی در هر کدام از قسمت های کد دارید در نظرات بفرمایید تا توضیح بیشتری بدم.ممنون میشم نظراتتون رو با من درمیون بزارید تا بتونم محتواهای با کیفیت تری تولید کنم که برای من به عنوان نویسنده و برای شما به عنوان خواننده مفید باشه.می تونید در تلگرام با من در ارتباط باشید:https://t.me/DanialRahimy@DanialRahimy جاوا اسکریپت با دانیال رحیمی دانیال رحیمی Sat, 10 Apr 2021 08:41:53 +0430