از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
جاوا اسکریپت: دریافت URL و اجزای فعلی (پروتکل، دامنه، پورت، مسیر، پرس و جو، هش) در این آموزش، روش دریافت URL فعلی یک HTML بارگذاری شده را بررسی خواهیم کرد. page، با استفاده از جاوا اسکریپت. ابتدا، اجازه دهید نگاهی به یک URL بیاندازیم: https://www.rasanegar.com:8080/category/article-title.html؟searchterm=Example+title#2 این یک URL ساختگی است که شامل چندین مؤلفه است -. ..
سرفصلهای مطلب
معرفی
در این آموزش نگاهی به این خواهیم داشت روش دریافت URL فعلی از یک HTML بارگذاری شده page، با استفاده از جاوا اسکریپت.
ابتدا بیایید نگاهی به یک URL بیاندازیم:
https://www.rasanegar.com:8080/category/article-title.html؟searchterm=Example+title#2
این یک URL ساخته شده است که شامل چندین مؤلفه است – پروتکل، دامنه، بندر، مسیر، پرس و جو و هش.
اگر می خواهید از تجزیه و تحلیل دستی URL ها، به خصوص با فرمت های URL پیچیده تر مانند Git خودداری کنید – بخوانید. روی چگونه به راحتی URL ها را در جاوا اسکریپت با تجزیه url تجزیه کنیم!
اجزای URL
URL که ما تعریف کرده‌ایم شامل بخش‌های مختلفی است که با کاراکترهای خاص خاصی مانند /، ? و #. هر یک از این بخش ها یک است جزء URL:
-
پروتکل – پروتکل URL به بخش URL اشاره دارد که کدام را تعریف می کند پروتکل برای انتقال داده استفاده می شود. در مورد ما، ما استفاده می کنیم
https://، به معنای پروتکل HTTPS است. -
دامنه – دامنه که به نام میزبان URL نیز شناخته می شود به بخش ادامه یک URL اشاره دارد –
www.rasanegar.com. -
بندر – قسمت پورت یک URL بعد از دامنه، قبل از آن مشخص می شود
:. در بیشتر مواقع، پورت عمومی نیست، بنابراین به ندرت آن را در برنامه های کاربردی مستقر می بینید، اما معمولاً در مرحله توسعه. -
مسیر – قسمت مسیر یک URL از نام دامنه و پورت پیروی می کند. یک منبع واحد را مشخص می کند روی یک وب سایت، HTML page، تصویر یا نوع دیگری از فایل یا دایرکتوری. در مثال ما، مسیر اشاره به
/category/article-title.htmlبخش، به این معنی که آن را بهarticle-title.htmlفایل روی سرور. -
پرس و جو – کوئری رشته ای است که معمولاً برای فعال کردن جستجوهای داخلی استفاده می شود روی یک وبسایت. بخش پرس و جو به
?articleTitle=Example+titleبخشی از URL مثال و نتیجه وارد کردن عبارت جستجو توسط کاربر استExample titleروی راarticle-title.htmlpage از وب سایت -
هش – بخش هش معمولاً برای نشان دادن یک لنگر استفاده می شود روی را page، که معمولا یک عنوان است، اما می تواند هر عنوان دیگری باشد
<div>یا برچسب، با توجه به اینکه هدف ما آن استidصفت. در مورد ما، ما هدف قرار می دهیم#2اسکرول نمای کاربر به تگ با علامتid=2.
به طور کلی، URL ها ساختار نسبتاً استاندارد شده ای دارند، که در آن عناصر خاصی اختیاری هستند، در حالی که برخی دیگر اینگونه نیستند:
<protocol>//<domain>:<port>/<path>/<query><hash>
اکنون، می‌توانیم نگاهی دقیق‌تر به روش دسترسی به URL فعلی و همچنین هر یک از اجزای آن با استفاده از جاوا اسکریپت بیندازیم.
روش دریافت URL فعلی در جاوا اسکریپت
در جاوا اسکریپت، Location شی حاوی اطلاعات مربوط به URL صفحه وب بارگیری شده فعلی است. متعلق به window، اگرچه، ما می توانیم مستقیماً به آن دسترسی داشته باشیم زیرا window به صورت سلسله مراتبی در بالای محدوده قرار دارد
برای دریافت URL فعلی، از آن استفاده می کنیم Location شی و آن را بازیابی کنید href ویژگی:
let url = window.location.href
console.log(url)
این منجر به:
https://www.rasanegar.com:8080/python/article-title.html؟searchterm=Example+title#2
را href ویژگی حاوی URL کامل منبع بارگیری شده فعلی است. اگر می خواهید برخی از مؤلفه های خاص را به جای کل URL بازیابی کنید، Location شی نیز دارای خواص مختلفی است.
منبع URL را دریافت کنید
را window.location.origin اموال برمی گردد URL پایه (پروتکل + نام میزبان + شماره پورت) از URL فعلی:
console.log(window.location.origin)
https://www.rasanegar.com:8080
پروتکل URL را دریافت کنید
را window.location.protocol اموال برمی گردد پروتکل استفاده شده توسط URL فعلی:
console.log(window.location.protocol)
https://
میزبان URL و نام میزبان را دریافت کنید
را window.location.host اموال برمی گردد نام میزبان و شماره پورت از URL فعلی:
console.log(window.location.host)
www.rasanegar.com:8080
از سوی دیگر، window.location.hostname اموال برمی گردد نام میزبان از URL فعلی:
console.log(window.location.hostname)
www.rasanegar.com
دریافت پورت URL
را window.location.port اموال برمی گردد شماره پورت از URL فعلی:
console.log(window.location.port)
8080
مسیر URL را دریافت کنید
را window.location.pathname اموال برمی گردد بخش مسیر از URL فعلی:
console.log(window.location.pathname)
/category/article-title.html
دریافت URL Query و Hash
را window.location.search ویژگی **بخش پرس و جو ** URL فعلی را برمی گرداند:
console.log(window.location.search)
?searchterm=Example+title
را window.location.hash اموال برمی گردد بخش هش از URL فعلی:
console.log(window.location.hash)
#2
نتیجه
همانطور که دیدیم، جاوا اسکریپت یک راه قدرتمند و در عین حال ساده برای دسترسی به URL فعلی ارائه می دهد. را Location شی، قابل دسترسی توسط Window رابط ما را قادر می سازد تا نه تنها نمایش رشته URL فعلی بلکه هر بخش از آن را دریافت کنیم.
را Location شی همچنین می تواند URL فعلی را تغییر داده و دستکاری کند و همچنین آدرس را تغییر مسیر دهد page به URL جدید
منتشر شده در 1403-01-16 10:00:03
