URL keitimas „JavaScript“ neįkeliant puslapio iš naujo

URL keitimas „JavaScript“ neįkeliant puslapio iš naujo
URL keitimas „JavaScript“ neįkeliant puslapio iš naujo
Arthur Petit
2024 m. liepos 8 d., pirmadienis 14:03:11

Dinaminis URL keitimas naudojant „JavaScript“.

Kai dirbate su šiuolaikinėmis žiniatinklio programomis, gali tekti keisti URL nesuaktyvinant puslapio įkėlimo iš naujo. Tai gali būti ypač naudinga kuriant sklandžią vartotojo patirtį.

Šiame vadove išnagrinėsime būdus, kaip pakeisti URL dalį po domeno, įskaitant metodus, leidžiančius pasiekti dalį prieš maišos (#) simbolį. Taip užtikrinamas kelių domenų politikos laikymasis ir pasiekiamas norimas URL modifikavimas.

komandą apibūdinimas
history.pushState() Prideda naują įrašą į naršyklės seansų istorijos krūvą, pakeičiant URL neįkeliant puslapio iš naujo.
window.history.pushState() Atnaujina dabartinį istorijos įrašą naujais būsenos duomenimis ir nauju URL.
window.location.hash Gauna arba nustato prieraišo URL dalį, kuri yra po maišos simbolio (#).
function changeURL(newPath) Apibrėžia funkciją, kuri atnaujina URL kelią naudojant istorijos API.
function updateHash(newHash) Apibrėžia funkciją, kuri atnaujina URL maišą.

Išsamus „JavaScript“ URL modifikavimo paaiškinimas

Pirmasis scenarijus naudoja history.pushState() metodas, kuris yra istorijos API dalis. Ši komanda leidžia kūrėjams įtraukti naują įrašą į naršyklės seansų istorijos krūvą, efektyviai pakeičiant adreso juostoje rodomą URL, neįkeliant puslapio iš naujo. Scenarijuje, const newURL = "/page2.php"; nustato naują kelią ir history.pushState(null, "", newURL); pakeičia URL į šį naują kelią. Apvyniojus history.pushState komanda tokioje funkcijoje kaip function changeURL(newPath), galime dinamiškai atnaujinti URL, jei reikia. Ši technika ypač naudinga vieno puslapio programoms (SPA), kur turinys dinamiškai keičiasi, neįkeliant viso puslapio iš naujo.

Antrasis scenarijus skirtas pakeisti URL maišą naudojant window.location.hash. Ši nuosavybė gauna arba nustato prieraišo URL dalį, kuri po maišos simbolio (#). Pagal nustatymą const hashValue = "newSection"; ir window.location.hash = hashValue;, URL maiša pakeičiama į #newSection, neįkeliant puslapio iš naujo. Šis metodas yra naudingas naršant tame pačiame puslapyje arba pateikiant nuorodas į konkrečias dokumento dalis. Be to, funkcija function updateHash(newHash) apima šią funkciją, todėl lengva dinamiškai pakeisti URL maišos dalį. Abu scenarijai suteikia galimybę sklandžiai keisti URL ir pagerinti naudotojo patirtį, išvengiant nereikalingo puslapio įkėlimo iš naujo.

Istorijos API naudojimas norint pakeisti URL neįkeliant iš naujo

„JavaScript“ su istorijos API

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

Manipuliuoti URL maišą neįkeliant iš naujo

„JavaScript“ maišos modifikavimui

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

Papildomų būdų, kaip pakeisti URL neįkeliant iš naujo, tyrinėjimas

Kitas URL keitimo neįkeliant puslapio iš naujo aspektas apima naudojimą replaceState() metodą iš istorijos API. Nors pushState() prideda naują istorijos įrašą, replaceState() pakeičia esamą istorijos įrašą. Tai gali būti ypač naudinga, kai norite pakeisti URL neperkraunant vartotojo istorijos keliomis būsenomis. Pavyzdžiui, jei turite vieno puslapio programą, kurios turinys dažnai keičiasi, galbūt norėsite atnaujinti URL, kad atspindėtų dabartinę būseną, neįtraukdami kiekvieno pakeitimo į istoriją. Taip atgal mygtuko funkcionalumas išlieka švarus ir patogus naudoti.

Naudoti replaceState(), galite parašyti funkciją, panašią į changeURL() bet vietoj to paskambink history.replaceState() jo viduje. Pavyzdžiui, function replaceURL(newPath) galėtų panaudoti history.replaceState(null, "", newPath); norėdami atnaujinti URL. Ši technika yra vertinga gerinant vartotojo patirtį, nes URL sinchronizuojamas su programos būsena, nekuriant nereikalingų istorijos įrašų. Be to, tai yra efektyvesnis būdas valdyti naršyklės istoriją, ypač dinaminėse žiniatinklio programose.

Dažni klausimai apie URL keitimą neįkeliant iš naujo

  1. Koks skirtumas tarp pushState() ir replaceState()?
  2. pushState() prideda naują įrašą į seansų istorijos krūvą, tuo tarpu replaceState() pakeičia esamą istorijos įrašą.
  3. Ar galiu pakeisti URL maišą neįkėlęs puslapio iš naujo?
  4. Taip, naudojant window.location.hash, galite pakeisti URL maišą neįkeldami puslapio iš naujo.
  5. Ar galima keisti tik URL užklausos parametrus?
  6. Taip, galite atnaujinti užklausos parametrus naudodami pushState() arba replaceState() metodus neįkeliant puslapio iš naujo.
  7. Ar modifikuoja URL su pushState() paveikti atgal mygtuką?
  8. Taip, kiekvienas skambutis į pushState() sukuria naują istorijos įrašą, todėl mygtukas „Atgal“ naršys per šias būsenas.
  9. Ar galiu naudoti šiuos metodus visose naršyklėse?
  10. Dauguma šiuolaikinių naršyklių palaiko istorijos API, įskaitant pushState() ir replaceState(), bet visada patikrinkite suderinamumą.
  11. Kaip tvarkyti popstate įvykius naudojant pushState()?
  12. Galite klausytis popstate įvykis, skirtas apdoroti aktyvaus istorijos įrašo pakeitimus ir atitinkamai atnaujinti vartotojo sąsają.
  13. Kas atsitiks, jei naudojant URL formatas yra neteisingas pushState()?
  14. Jei URL formatas neteisingas, pushState() bus rodoma klaida, todėl įsitikinkite, kad jūsų URL yra tinkamai suformatuoti.

Baigiant temą

Keičiant URL iš naujo neįkeliant puslapio naudojant „JavaScript“, galima labai pagerinti naudotojo patirtį, nes sukuriamas sklandesnis naršymas ir išvengiama nereikalingo puslapio įkėlimų iš naujo. Istorijos API naudojimas pushState() ir replaceState() Metodai leidžia kūrėjams dinamiškai atnaujinti URL, išlaikant programos būsenos sinchronizavimą ir netrukdant naršyklės istorijai. Be to, manipuliuojant URL maiša galima efektyviai naršyti puslapyje. Šių metodų supratimas ir įgyvendinimas yra būtinas kuriant modernias, reaguojančias žiniatinklio programas.