این آموزش در تاریخ ۱۴۰۱/۰۶/۲۸ آپدیت شده است.
آموزش ویژگی href در BOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی href در BOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی href در BOM جاوااسکریپت
با استفاده از ویژگی location.href میتونیم هم آدرس URL کامل صفحه رو بدست آوریم و هم میتونیم آدرس جدید براش مشخص نماییم.
| مقدار برگشتی | برگشت آدرس URL کامل صفحه که شامل http یا https می باشد |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : بدست آوردن آدرس URL صفحه بطور کامل ( از https تا آخرش )
|
1 2 3 4 5 6 7 8 9 10 |
<script> function Get(){ var My_Href , Result; Result = document.getElementById("Result"); My_Href = location.href; Result.innerHTML = My_Href; } </script> |
مثال شماره ۲ : بدست آوردن آدرس URL صفحه بطور کامل ( از https تا آخرش ) ( با استفاده از ویژگی URL در DOM جاوا اسکریپت )
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function GetURL(){ var MyURL , Result; Result = document.getElementById("Result"); MyURL = document.URL; Result.innerHTML = MyURL; Result.style.display = "block"; } </script> |
مثال شماره ۳ : ساخت دکمه ( button ) لینک دار ( که وقتی روش کلیک کنیم بره به یک آدرس دلخواه )
|
1 2 3 4 5 |
<body> <button onclick="location.href='https://free-learn.ir/'">برو به سایت فری لرن</button> </body> |
مثال شماره ۴ : استفاده از پروتکل mailto ( برای ایجاد کردن لینک ایمیل )
|
1 2 3 4 5 |
<body> <button onclick="location.href='mailto:FreeLearn20181@gmail.com'">کلیک کنید</button> </body> |
مثال شماره ۵ : ایجاد فرم گزارش خطا یا ارسال مشکل یا هرچی ..
فک کنم در برخی از سایت ها همچین چیزی دیدید!؟ که مثلا یک دکمه هست روش کلیک میکنید و میگن مثلا اگه مشکلی چیزی تو اون صفحه هست برای ما ارسال کنید.
خب بنظره شما چیزی که این وسط مهمه و عملا اصل کاریه چیه؟ خب مشخصه دیگه، آدرس اون صفحه ای است که کاربر درش قرار داره و قراره گزارشش بده ( مدیر اون سایت از این طریق متوجه میشه که مشکل در کدام آدرس و صفحه هستش )
پس خیلی راحت با استفاده از ویژگی href میتونیم آدرس کامل صفحه رو بگیریم و بعدش درون یک اینپوت قرارش بدیم، بعدش دیگه اون اینپوت رو ارسال میکنیم. ( دیگه اینجاش میشه سمت سرور، که مثلا ایمیل بشه یا مثلا درون پایگاه داده ذخیره بشه و.. )
|
1 2 3 4 5 6 |
<script> var My_URL = location.href; document.getElementById("url_page").value = My_URL; </script> |
مثال شماره ۶ : ساخت دکمه اشتراک گذاری در شبکه های اجتماعی ( واتس اپ ، توییتر ، تلگرام ، لینکدین )
|
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 |
<script> var MyURL = location.href; function whatsapp(){ var url = "https://wa.me/?text="; window.open( url + MyURL , '_blank' ); } function twitter(){ var url = "https://twitter.com/share?url="; window.open( url + MyURL , '_blank' ); } function telegram(){ var url = "https://telegram.me/share/url?url="; window.open( url + MyURL , '_blank' ); } function linkedin(){ var url = "https://www.linkedin.com/shareArticle?url="; window.open( url + MyURL , '_blank' ); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| location.href | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- گرفتن مقدار :
|
1 |
location.href; |
- ست / تنظیم مقدار جدید :
|
1 |
location.href = "New_Address"; |
- مثال برای تنظیم کردن مقدار جدید :
|
1 |
location.href = "https://free-learn.ir/"; |
Free-Learn
جدول مقادیر این ویژگی
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| New_Address | برای تنظیم آدرس URL جدید صفحه میتونه آدرس مطلق باشه، مثه : https://test.com/test.html میتونه آدرس نسبی باشه، مثه : test/test.html میتونه یک لنگر باشه https://test.com/#test میتونه یک پروتکل یا Protocol باشه ftp://testserver.com mailto:test@test.com |
