Измена УРЛ-а у ЈаваСцрипт-у без поновног учитавања странице

Динамичка промена УРЛ-а помоћу ЈаваСцрипт-а

Када радите са модерним веб апликацијама, можда ћете морати да измените УРЛ без покретања поновног учитавања странице. Ово може бити посебно корисно за стварање беспрекорног корисничког искуства.

У овом водичу ћемо истражити методе за промену дела УРЛ-а после домена, укључујући технике које вам омогућавају да приступите делу пре хеш (#) симбола. Ово обезбеђује усклађеност са смерницама за више домена уз постизање жељене измене УРЛ-а.

Детаљно објашњење модификације УРЛ-а у ЈаваСцрипт-у

Прва скрипта користи history.pushState() метод, који је део АПИ-ја за историју. Ова команда омогућава програмерима да додају нови унос у стог историје сесија претраживача, ефективно мењајући УРЛ приказан у адресној траци без поновног учитавања странице. У сценарију, const newURL = "/page2.php"; поставља нови пут, и history.pushState(null, "", newURL); мења УРЛ на ову нову путању. Умотавањем на history.pushState команду у функцији као што је function changeURL(newPath), можемо динамички ажурирати УРЛ по потреби. Ова техника је посебно корисна за апликације на једној страници (СПА) где се садржај динамички мења без поновног учитавања целе странице.

Друга скрипта адресира промену хеша УРЛ-а помоћу window.location.hash. Ово својство добија или поставља сидрени део УРЛ-а који прати хеш симбол (#). Постављањем const hashValue = "newSection"; и window.location.hash = hashValue;, хеш УРЛ-а се мења у #невСецтион без поновног учитавања странице. Овај приступ је користан за навигацију унутар исте странице или повезивање са одређеним одељцима у документу. Поред тога, функција function updateHash(newHash) инкапсулира ову функционалност, што олакшава динамичку промену хеш дела УРЛ адресе. Обе скрипте пружају беспрекорне начине за измену УРЛ-а и побољшање корисничког искуства избегавањем непотребног поновног учитавања страница.

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

Истраживање додатних метода за измену УРЛ-а без поновног учитавања

Други аспект измене УРЛ адресе без поновног учитавања странице укључује коришћење replaceState() метод из АПИ-ја историје. Док pushState() додаје нови унос историје, replaceState() мења тренутни унос историје. Ово може бити посебно корисно када желите да промените УРЛ без претрпавања историје корисника са више стања. На пример, ако имате апликацију на једној страници у којој се садржај често мења, можда бисте желели да ажурирате УРЛ тако да одражава тренутно стање без додавања сваке промене у историју. Ово одржава функцију дугмета за повратак чистом и једноставном за коришћење.

Користити replaceState(), можете написати функцију сличну changeURL() али уместо тога позовите history.replaceState() унутар тога. На пример, function replaceURL(newPath) могао искористити history.replaceState(null, "", newPath); да ажурирате УРЛ. Ова техника је драгоцена за побољшање корисничког искуства тако што се УРЛ адреса синхронизује са стањем апликације без прављења непотребних уноса историје. Штавише, нуди ефикаснији начин управљања историјом претраживача, посебно у динамичким веб апликацијама.