Úprava adresy URL v jazyku JavaScript bez opätovného načítania stránky

Dynamická zmena adresy URL pomocou JavaScriptu

Pri práci s modernými webovými aplikáciami sa môže stať, že budete musieť upraviť adresu URL bez spustenia opätovného načítania stránky. To môže byť užitočné najmä pri vytváraní bezproblémového používateľského zážitku.

V tejto príručke preskúmame metódy na zmenu časti adresy URL za doménou vrátane techník, ktoré vám umožnia získať prístup k časti pred symbolom hash (#). Tým sa zaistí súlad s pravidlami pre viaceré domény a zároveň sa dosiahne požadovaná úprava adresy URL.

Podrobné vysvetlenie modifikácie URL v JavaScripte

Prvý skript využíva history.pushState() metóda, ktorá je súčasťou rozhrania History API. Tento príkaz umožňuje vývojárom pridať novú položku do zásobníka histórie relácie prehliadača, čím efektívne zmení adresu URL zobrazenú v paneli s adresou bez opätovného načítania stránky. V scenári const newURL = "/page2.php"; nastavuje novú cestu a history.pushState(null, "", newURL); zmení adresu URL na túto novú cestu. Obalením history.pushState príkaz vo funkcii ako function changeURL(newPath), môžeme dynamicky aktualizovať URL podľa potreby. Táto technika je užitočná najmä pre jednostránkové aplikácie (SPA), kde sa obsah dynamicky mení bez opätovného načítania celej stránky.

Druhý skript rieši zmenu hash adresy URL pomocou window.location.hash. Táto vlastnosť získa alebo nastaví kotviacu časť adresy URL, ktorá nasleduje za symbolom hash (#). Nastavením const hashValue = "newSection"; a window.location.hash = hashValue;, hodnota hash adresy URL sa zmení na #newSection bez opätovného načítania stránky. Tento prístup je užitočný pri navigácii na tej istej stránke alebo pri odkazovaní na konkrétne sekcie v rámci dokumentu. Okrem toho funkcia function updateHash(newHash) zapuzdruje túto funkciu, čím uľahčuje dynamickú zmenu hashovej časti adresy URL. Oba skripty poskytujú bezproblémové spôsoby úpravy adresy URL a zlepšenia používateľskej skúsenosti tým, že sa vyhnú zbytočnému opätovnému načítaniu stránky.

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");

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");

Preskúmanie ďalších metód na úpravu adresy URL bez opätovného načítania

Ďalším aspektom úpravy adresy URL bez opätovného načítania stránky je použitie replaceState() metóda z rozhrania History API. Zatiaľ čo pushState() pridá nový záznam histórie, replaceState() upraví aktuálny záznam histórie. To môže byť užitočné najmä vtedy, keď chcete zmeniť adresu URL bez toho, aby ste zahltili históriu používateľa viacerými stavmi. Ak máte napríklad jednostránkovú aplikáciu, ktorej obsah sa často mení, možno budete chcieť aktualizovať adresu URL, aby odrážala aktuálny stav bez pridávania každej zmeny do histórie. Vďaka tomu je funkcia tlačidla Späť čistá a užívateľsky prívetivá.

Použit replaceState(), môžete napísať funkciu podobnú changeURL() ale namiesto toho zavolaj history.replaceState() vnútri. napr. function replaceURL(newPath) mohol využiť history.replaceState(null, "", newPath); na aktualizáciu adresy URL. Táto technika je cenná na zlepšenie používateľského zážitku tým, že udržuje adresu URL v synchronizácii so stavom aplikácie bez vytvárania nepotrebných záznamov histórie. Okrem toho ponúka efektívnejší spôsob správy histórie prehliadača, najmä v dynamických webových aplikáciách.