مرجع عناصر HTML : عنصر <geolocation> (آزمایشی)
عنصر <geolocation> یک کنترل تعاملی برای کاربر ایجاد میکند تا دادههای موقعیت مکانی خود را با صفحه به اشتراک بگذارد.
این موارد را فراهم میکند:
یک رابط کاربری بصری تعریفشده توسط مرورگر.
فرآیندی برای مدیریت مجوزهای لازم برای ویژگی موقعیت مکانی.
ویژگیهای API برای دسترسی به دادههای موقعیت مکانی و پاسخ به دادههای موقعیت مکانی دریافتی و تغییرات مجوز.
این عنصر شامل ویژگیهای سراسری است.
autolocate
یک ویژگی بولی که وقتی روی true تنظیم میشود، مشخص میکند که مرورگر باید بلافاصله پس از رندر شدن عنصر ، دادههای مکان را بازیابی کند، مشروط بر اینکه قبلاً مجوز داده شده باشد. اگر روی false تنظیم شود، دادههای مکان تا زمانی که کاربر کنترل را فعال نکند، بازیابی نمیشوند. مقدار پیشفرض روی false است.
اگر قبلاً مجوز داده نشده باشد، این ویژگی هیچ تاثیری ندارد.
watch
یک ویژگی بولی که وقتی روی true تنظیم میشود، مشخص میکند که مرورگر باید هر زمان که موقعیت دستگاه کاربر تغییر میکند، دادههای مکان را بازیابی کند. اگر روی false تنظیم شود، دادههای مکان فقط یک بار بازیابی میشوند. مقدار پیشفرض روی false است.
عنصر یک کنترل تعریفشده توسط مرورگر برای اشتراکگذاری دادههای مکانی ارائه میدهد. برای مثال، در کروم، این دکمه دارای یک آیکون "پین نقشه" و متن بصری ("استفاده از مکان" در محتوای انگلیسی) است.
همچنین امکان مدیریت بصری مجوزهای کاربر را فراهم میکند. برای مثال، در کروم، اگر کاربر قبلاً اجازه دسترسی به دادههای مکانی را رد کرده باشد یا بدون انتخاب، پنجره مجوز را رد کرده باشد، میتواند دوباره دکمه را فشار دهد تا انتخاب خود را بهروزرسانی کند. در مواردی که قبلاً اجازه را رد کرده باشد، پنجرههای بعدی به او اطلاع میدهند که قبلاً اجازه اشتراکگذاری دادههای مکانی را نداده است و از او میپرسند که آیا میخواهد همچنان اجازه ندهد یا اجازه دهد.
یکی از جنبههای کلیدی عنصر این است که انتخاب آگاهانه کاربر را منعکس میکند و استفادههای احتمالی را که ممکن است کاربر را فریب دهد تا دادههای مکانی خود را ناخواسته ارائه دهد، مسدود میکند (برای اطلاعات بیشتر به مسدود کردن مراجعه کنید).
رابط DOM API این عنصر، HTMLGeolocationElement، ویژگیهایی را برای دسترسی به دادههای موقعیت بازگشتی، وضعیت مجوز فعلی و خطاهایی در صورت عدم موفقیت بازیابی دادهها فراهم میکند و میزان منطق جاوا اسکریپت مورد نیاز برای نوشتن را کاهش میدهد. همچنین دارای رویدادهایی برای اجرای کد در پاسخ به دادههای موقعیت مکانی دریافتی، تغییرات در وضعیت مجوز و تعاملات کاربر با کادر محاورهای مجوز است.
به دلایل عملکردی، حداکثر سه عنصر در هر صفحه مجاز است. در صورت تجاوز از این سهمیه، عملکرد همه عناصر غیرفعال میشود.
ارتباط با API موقعیت جغرافیایی
API موقعیت جغرافیایی (Geolocation API) جایگزین قدیمیتری برای مدیریت دادههای مکانی ارائه میدهد. این API دارای برخی کاستیها است که عنصر قصد دارد آنها را حل کند، به ویژه اینکه رابط کاربری و منطق زیربنایی برای درخواست دادهها باید هر بار از ابتدا پیادهسازی شود و مدیریت مجوزها میتواند غیرشهودی باشد.
عنصر از ویژگیهای API موقعیت جغرافیایی در پسزمینه استفاده میکند. به طور پیشفرض، مرورگر یک بار دادههای مکان را درخواست میکند، گویی متد فراخوانی شده است. با این حال، اگر ویژگی watch روی true تنظیم شود، مرورگر هر زمان که موقعیت دستگاه تغییر کند، دادهها را بهروزرسانی میکند، گویی فراخوانی شده است.
اگر دادهها با موفقیت بازیابی شوند، در ویژگی HTMLGeolocationElement.position موجود است که حاوی یک شیء GeolocationPosition است. اگر بازیابی دادهها ناموفق باشد، اطلاعات خطا در ویژگی HTMLGeolocationElement.error موجود است که حاوی یک شیء GeolocationPositionError است.
ویژگی سراسری lang توسط عنصر برای انتخاب زبان متن رندر شده استفاده میشود. این بدان معناست که میتوانید یک ویژگی lang را مستقیماً روی عنصر یا روی یکی از اجداد آن تنظیم کنید تا به مرورگر بگویید از چه زبانی برای برچسب دکمه استفاده کند.
اگر هیچ ویژگی lang مناسبی تنظیم نشده باشد، از تنظیمات زبان ترجیحی مرورگر استفاده میشود.
شما میتوانید محتوای جایگزین (fallback content) را بین تگهای باز و بستهی عنصر قرار دهید که در صورت پشتیبانی نشدن نمایش داده میشوند. برای مثال، میتوانید پیام "پشتیبانی نمیشود" را قرار دهید:
با این حال، یک راه حل بهتر در دنیای واقعی میتواند شامل یک عنصر معمولی باشد که از API موقعیت جغرافیایی برای بازیابی دادههای موقعیت مکانی استفاده میکند:
یکی از ایدههای کلیدی پشت طراحی عنصر این است که باید انتخاب آگاهانه کاربر برای افشای اطلاعات موقعیت را منعکس کند و از فریب کاربران توسط افراد خرابکار برای فعال کردن آن، مثلاً از طریق کلیکربایی، جلوگیری کند. به همین دلیل، مرورگر سابقهای از دلایل مسدودکننده برای هر عنصر رندر شده را نگه میدارد.
هنگامی که یک مسدودکننده روی یک عنصر فعال است، بسته به دلیل، به طور موقت یا دائمی از عملکرد آن جلوگیری میشود (مسدود میشود). هنگامی که یک عنصر مسدود میشود، گفته میشود که نامعتبر است. میتوانید با پرسوجو از ویژگی HTMLGeolocationElement.isValid بررسی کنید که آیا نامعتبر است یا خیر. همچنین میتوانید دلیل نامعتبر بودن آن را از طریق ویژگی HTMLGeolocationElement.invalidReason برگردانید - برای لیست کامل دلایل ممکن، به آن صفحه مراجعه کنید.
عنصر محدودیتهای متعددی در سبکهای CSS دارد که میتوانند روی آن اعمال شوند. برخی از این محدودیتها برای اعمال دسترسیپذیری اساسی طراحی شدهاند و در صورت عدم رعایت آنها، دکمه غیرفعال میشود. برخی مقادیر یا محدودههای مقداری خاصی را برای ویژگیهای مختلف اعمال میکنند.
هر ویژگی که در زیربخشهای زیر فهرست نشده باشد، یا از نظر منطقی معادل یک ویژگی فیزیکی فهرست شده در زیربخشهای زیر نباشد، هنگام تنظیم روی عنصر نادیده گرفته میشود.
اگر محدودیتهای زیر رعایت نشوند، دکمهی رندر شده غیرفعال میشود (به این معنی که فشردن آن هیچ تاثیری نخواهد داشت):
- نسبت کنتراست رنگ بین color و background-color باید حداقل 3:1 باشد.
- اندازهی فونت نباید از مقدار small (در مورد مقادیر کلمات کلیدی) یا مقدار محاسبهشدهی آن (در مورد سایر انواع مقادیر) کوچکتر باشد.
محدودیتهای مقدار ویژگی CSS زیر بر روی عنصر اعمال میشوند. اگر تلاشی برای تنظیم این ویژگیها بر روی مقادیری خارج از محدودیتهای ذکر شده در عنصر انجام شود، مقدار طوری تنظیم میشود که برابر با محدودیت (در مورد محدودیت مقدار دقیق) یا برابر با نزدیکترین حد بالا یا پایین مقدار محاسبه شده (در مورد محدودیت محدوده) باشد.
opacity
1.0
line-height
normal
white-space
nowrap
user-select
none
appearance
auto
box-sizing
content-box
vertical-align
middle
text-emphasis
initial
text-shadow
initial
outline-offset
0 یا بیشتر.
font-weight
200 یا بیشتر.
word-spacing
بین 0 و 0.5em، شامل.
letter-spacing
بین -0.05em و 0.2em، شامل.
min-height
1em یا بیشتر.
max-height
3em یا کمتر. هیچ کدام یک مقدار پذیرفته شده نیست.
min-width
مقدار محاسبه شده fit-content یا کمتر.
border-width
1em یا کمتر.
محدودیتهای زیر پیچیدهتر از محدودیتهای مقدار ساده هستند:
Block direction padding
اگر block-size روی auto تنظیم شده باشد، padding-block-start و padding-block-end (و ویژگیهای فیزیکی معادل برای حالت نوشتاری فعلی) حداکثر به 1em محدود میشوند و باید برابر باشند.
inline direction padding
اگر inline-size روی auto تنظیم شده باشد، padding-inline-start و padding-inline-end (و ویژگیهای فیزیکی معادل برای حالت نوشتاری فعلی) حداکثر به 5em محدود میشوند و باید برابر باشند.
ویژگیهایی که میتوانند به طور معمول تنظیم شوند
ویژگیهای CSS زیر میتوانند به طور معمول استفاده شوند:
font-kerning
font-optical-sizing
font-stretch
font-synthesis-weight
font-synthesis-style
font-synthesis-small-caps
font-feature-settings
forced-color-adjust
text-rendering
align-self
anchor-name
aspect-ratio
border, border-top, border-right, border-bottom, and border-left
clear
color-scheme
contain-intrinsic-width
contain-intrinsic-height
container-name
container-type
counter-reset, counter-increment, and counter-set
flex, flex-grow, flex-shrink, and flex-basis
float
height
isolation
justify-self
left
order
orphans
outline, outline-color, and outline-style
overflow-anchor
overscroll-behavior, overscroll-behavior-inline, overscroll-behavior-block, overscroll-behavior-x, and overscroll-behavior-y
page
position
position-anchor
right
scroll-margin, scroll-margin-top, scroll-margin-right, scroll-margin-bottom, and scroll-margin-left
scroll-padding, scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left, scroll-padding-inline-start, scroll-padding-block-start, scroll-padding-block-start, scroll-padding-inline-end, and scroll-padding-block-end
text-spacing-trim
text-transform
top
visibility
x
y
ruby-position
user-select
width
will-change
z-index
عنصر دارای یک نام قابل دسترس است که به زبانی که روی آن تنظیم شده است نوشته شده است. همچنین نقش دکمه را دارد تا توسط صفحهخوانها به عنوان یک دکمه شناخته شود.
علاوه بر این، عنصر دارای مقدار پیشفرض tabindex برابر با 0 است، بنابراین با توجه به فوکوس صفحه کلید، مانند یک واقعی رفتار میکند.
در نهایت، برای کسب اطلاعات در مورد محدودیتهای سبکدهی اعمال شده بر عنصر برای اجرای الزامات اساسی دسترسی، به بخش محدودیتهای دسترسی مراجعه کنید.
این مثال از عنصر برای بازیابی موقعیت مکانی فعلی شما استفاده میکند که در زیر دکمه در یک عنصر چاپ میشود. این مثال همچنین از یک تابع جایگزین معمولی برای بازیابی دادههای موقعیت مکانی در مرورگرهایی که از آن پشتیبانی نمیکنند، استفاده میکند.
ما یک عنصر را با یک تابع جایگزین تو در تو در داخل آن قرار میدهیم که در مرورگرهایی که از پشتیبانی نمیکنند، رندر میشود. ما همچنین یک برای خروجی دادههای موقعیت مکانی و خطاها در آن قرار میدهیم.
در اسکریپت ما، با گرفتن یک ارجاع به عنصر خروجی شروع میکنیم. سپس با آزمایش نوع تشخیص میدهیم که آیا عنصر پشتیبانی میشود یا خیر:
- اگر پشتیبانی شود، ابتدا یک ارجاع به عنصر میگیریم و سپس یک شنونده رویداد مکان اضافه میکنیم. هنگامی که دکمه فشرده میشود و دادهها بازیابی میشوند، شنونده مختصات (عرض، طول) را در خروجی چاپ میکند (از طریق ویژگی موقعیت بازیابی میشود)، یا اگر بازیابی دادهها ناموفق بود، یک پیام خطا (از طریق ویژگی خطا بازیابی میشود) نمایش میدهد.
- اگر پشتیبانی نشود، یک ارجاع به عنصر جایگزین میگیریم و همان دادهها را بازیابی و چاپ میکنیم، با این تفاوت که این بار از یک شنونده رویداد کلیک روی دکمه و یک فراخوانی برای بازیابی دادهها استفاده میکنیم.
این کد را به صورت زنده (کد منبع) ببینید. همچنین میتوانید نسخهای از این مثال را پیدا کنید که شامل ویژگی watch در عنصر است و بنابراین هر بار که موقعیت دستگاه کاربر تغییر میکند، دادههای مکان را دریافت میکند (اجرای زنده و کد منبع را ببینید).
در صورت امکان، نسخههای نمایشی را در یک مرورگر پشتیبانیشده و یک مرورگر پشتیبانینشده مشاهده کنید و تفاوت در جریان گفتگوی مجوزها را هنگام انتخاب اجازه یا رد مجوز استفاده از موقعیت مکانی مشاهده کنید.
برای مشاهدهی یک مثال کاملتر که از دادههای مکان برای ایجاد نقشهای از منطقهی محلی شما استفاده میکند، به صفحه مرجع HTMLGeolocationElement مراجعه کنید.
| مشخصه | توضیحات |
|---|
| دسته بندی محتوا | Flow content, phrasing content, interactive content, palpable content. |
| محتوای مجاز | هر محتوای جایگزین شفاف و مناسب. |
| حذف برچسب | هیچکدام، هر دو تگ شروع و پایان اجباری هستند. |
| والدین مجاز | هر عنصری که محتوای جملهبندیشده را بپذیرد. |
| نقش ضمنی ARIA | بدون نقش متناظر |
| نقشهای مجاز ARIA | button |
| رابط DOM | HTMLGeolocationElement |
