Fragment — URI ichida # belgisidan keyin joylashadigan va asosiy resource ichidagi ma’lum qism, holat yoki secondary resource’ni ko‘rsatadigan komponent. Web URLlarda fragment ko‘pincha sahifadagi elementga scroll qilish yoki client-side routing uchun ishlatiladi.
Misol:
https://uzbekdevs.uz/wiki/dom#event
Bu URLning fragment qismi event.
Serverga yuborilishi
Browser HTTP request yuborganda fragment odatda request targetga kiritilmaydi.
Server quyidagini oladi:
/wiki/dom
Ammo #event browserda qoladi.
Shu sababli server-side application fragment qiymatini oddiy request logidan ko‘rmaydi.
Elementga o‘tish
HTML element id atributiga ega bo‘lsa fragment shu elementni topishi mumkin:
<h2 id="event">Event</h2>
URL:
#event
browserni shu elementga scroll qiladi.
Element ID URL encoding va case qoidalariga mos bo‘lishi kerak.
Named anchor
Tarixan <a name="..."> elementi fragment target sifatida ishlatilgan.
Zamonaviy HTMLda id umumiy usul.
Heading, section yoki boshqa elementga id berilishi mumkin.
Bir documentda ID unique bo‘lishi kerak.
Fragment identifier
Fragmentning aniq semantikasi resource media type’iga bog‘liq.
HTMLda element ID.
SVGda element yoki view.
Media formatlarda time range yoki boshqa secondary resource.
URI umumiy syntaxni beradi, format esa ma’noni belgilaydi.
Browser location
JavaScript joriy fragmentni:
location.hash
orqali olishi mumkin.
Qiymat # bilan birga qaytishi ehtimoli bor.
Fragmentni o‘zgartirish yangi server requesti yubormasdan history entry yaratishi mumkin.
Hashchange
Fragment o‘zgarganda hashchange event ishlashi mumkin.
- tab;
- accordion;
- route;
- filter;
- modal
holatini fragment bilan bog‘lashi mumkin.
Event initial page load holatini alohida boshqarishi mumkin.
Hash routing
Eski yoki sodda SPA routerlar route’ni fragment ichida saqlaydi:
/#/users/15
Server doim / documentini qaytaradi.
Browser fragmentni serverga yubormagani sabab server route konfiguratsiyasi talab qilinmaydi.
Kamchiligi — URL estetikasi va ayrim SEO hamda analytics farqlari.
History API routing
Zamonaviy SPA ko‘pincha fragment o‘rniga History API bilan normal path ishlatadi:
/users/15
Server deep link uchun frontend shell qaytarishi kerak.
Fragment esa page ichidagi section uchun saqlanishi mumkin.
Text fragment
Ayrim browserlar URL fragment orqali sahifadagi ma’lum text bo‘lagini highlight qilishga oid syntaxni qo‘llab-quvvatlaydi.
Bu oddiy element IDdan farq qiladi.
URL uzunroq bo‘lishi va privacy jihatdan selected textni oshkor qilishi mumkin.
Scroll behavior
CSS:
html {
scroll-behavior: smooth;
}
fragment navigatsiyasini yumshoq qilishi mumkin.
Fixed header target headingni yopib qo‘ysa scroll-margin-top ishlatilishi mumkin.
Accessibility va motion preference hisobga olinadi.
Dynamic content
Target element page load paytida hali DOMda bo‘lmasa browser unga scroll qila olmaydi.
SPA data yuklagach fragment targetni qayta topishi kerak.
Async render va virtualized list fragment navigatsiyasini murakkablashtiradi.
ID tanlash
Heading matnidan ID yaratilishi mumkin:
Bog‘liq tushunchalar
→ bogliq-tushunchalar
Slug generation Unicode va duplicate headinglarni hisobga oladi.
Sarlavha o‘zgarsa eski fragment linklari buzilishi mumkin.
Accessibility
Fragment navigation keyboard focusni avtomatik ko‘chirmasligi mumkin.
Screen reader user yangi sectionga o‘tganini tushunishi uchun target focusable qilinishi yoki route navigationda focus boshqarilishi mumkin.
Faqat visual scroll yetarli emas.
Fragment va Query
?page=2
serverga yuboriladi va resource representationiga ta’sir qilishi mumkin.
Fragment:
#comments
client tarafda resource ichidagi qismni ko‘rsatadi.
Ikkalasi bir URLda birga ishlashi mumkin.
Token fragmentda
OAuthga oid tarixiy flowlarda access token fragment orqali qaytarilgan holatlar mavjud.
Fragment server logiga to‘g‘ridan-to‘g‘ri tushmasligi mumkin, ammo browser history va client scriptlar uchun ko‘rinadi.
Zamonaviy security flow authorization code va PKCEga ko‘proq tayanadi.
Referrer
Fragment odatda HTTP Referer headeriga kiritilmaydi.
Bu fragmentdagi ma’lumot third-party requestga to‘liq uzatilmasligini anglatadi.
Lekin sahifadagi JavaScript location.hashni o‘qib boshqa joyga yuborishi mumkin.
Encoding
Fragment ichidagi belgilar URI qoidalariga ko‘ra encoded bo‘lishi mumkin.
Browser DOM ID bilan solishtirishda decode behaviorini qo‘llaydi.
#, % va Unicode qiymatlari ehtiyotkor ishlatiladi.
SEO
Heading fragmentlari search resultda ma’lum bo‘limga deep link yaratishga yordam berishi mumkin.
Ammo fragment odatda alohida server document emas.
Har fragment uchun mutlaqo boshqa content faqat clientda ko‘rsatilsa crawler behaviori tekshiriladi.
History entry
Fragment o‘zgartirilganda browser history’ga yangi entry qo‘shilishi mumkin. User back tugmasi bilan oldingi sectionga qaytadi. JavaScript tez-tez fragment almashtirsa history keraksiz yozuvlar bilan to‘ladi. Joriy entryni almashtirish kerak bo‘lsa history.replaceState yoki mos API ishlatiladi.
Scroll restoration
Browser page reload yoki history navigatsiyasida oldingi scroll holatini tiklashi mumkin. Fragment target va manual scroll restoration bir-biriga to‘qnashishi ehtimoli bor. SPA router qaysi holatda sectionga, qaysi holatda oldingi pozitsiyaga qaytishni belgilaydi.
Fragment state
Fragmentga katta JSON yoki sensitive state yozish URLni noqulay va tarixda ko‘rinadigan qiladi. Faqat share qilinishi foydali bo‘lgan kichik state saqlanadi.
Bog‘liq tushunchalar
URI Fragment, Fragment identifier, Anchor, HTML id, Hash routing, location.hash, hashchange, Deep link, Query string, Browser navigation