Тази статия ще опише методите за промяна на URL адреса без презареждане на уеб страницата с помощта на JavaScript.
Как да промените/промените URL адреса в JavaScript без презареждане на страницата?
За да промените URL адреса без презареждане на уеб страницата, използвайте следния предварително дефиниран метод на JavaScript:
Метод 1: Променете URL адреса в JavaScript без презареждане на страницата с помощта на метода „pushState()“
За да промените URL адреса без презареждане на уеб страницата, използвайте „ pushState() ” метод. Това е функция или предварително дефиниран метод на „ история Обект ”, който позволява промяна на хронологията на браузъра без навигация или опресняване на страницата. Той просто добавя или модифицира стека на историята и не зарежда нова страница. Използвайки този подход, можете да превключвате напред и назад между страниците, като добавяте нов запис към стека с хронология на браузъра.
Синтаксис
Следвайте дадения синтаксис за метода „pushState()“:
прозорец. история . pushState ( състояние , заглавие , URL адрес ) ;
Тук:
- “ състояние ” представлява новия запис в хронологията.
- “ заглавие ” е конкретният текст, който може да бъде показан в заглавната лента на браузъра.
- “ URL адрес ” показва заменения URL като нов запис.
Пример
В HTML файл създайте четири бутона, които извикват „ modifyUrl() ” при щракване върху бутона:
< бутон при щракване = 'modifyUrl('CSS урок', 'CSSTutorial.html');' > 2 бутон >
< бутон при щракване = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 бутон >
< бутон при щракване = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 бутон >
Дефинирайте функция ' modifyUrl() ” в JavaScript файл, който ще се задейства при натискане на бутон. Отнема два параметъра, „ заглавие “ и „ URL адрес ”. Когато методът се извика при натискане на бутона, „title“ и „url“ ще бъдат предадени като аргументи. Проверете типа на „ pushState ” на историческия обект, ако не е „ недефиниран ”. След това се обадете на „ history.pushState() ” за промяна на URL адреса:
функция modifyUrl ( заглавие , URL адрес ) {
ако ( тип ( история. pushState ) != 'недефиниран' ) {
беше обект = {
Заглавие : заглавие ,
URL адрес : URL адрес
} ;
история. pushState ( обект , обект Заглавие , обект URL адрес ) ;
}
}
Може да се види, че при всяко щракване на бутон, URL адресът ще бъде успешно променен без презареждане на страницата:
В горния изход можете да видите, че бутонът със стрелка назад горе вляво ( <- ) е активиран, докато щраквате върху бутона, той показва, че можете да навигирате напред и назад, защото „ pushState() ” добавя новия URL към стека с хронология.
Метод 2: Променете URL адреса в JavaScript без презареждане на страницата с помощта на метода „replaceState()“
Използвай ' replaceState() ” метод за промяна на URL адреса без презареждане на уеб страницата. Това също е характеристика на „ история Обект ”, но няма да добави нов запис към стека с хронология. Той променя съществуващото състояние на хронологията на браузъра и го заменя с ново състояние. Използвайки този подход, не можете да превключвате напред и назад между страниците.
Синтаксис
Даденият синтаксис се използва за метода „replaceState()“:
Пример
В дефинираната функция извикайте „ replaceState() ” за замяна на URL адреса при щракване върху бутона без презареждане или навигация в страницата:
ако ( тип ( история. replaceState ) != 'недефиниран' ) {
беше обект = {
Заглавие : заглавие ,
URL адрес : URL адрес
} ;
история. replaceState ( обект , обект Заглавие , обект URL адрес ) ;
}
}
Резултатът показва, че при всяко щракване на бутон URL адресът е променен и няма опция за навигация, за да се върнете назад, тъй като бутонът със стрелка назад е деактивиран:
Предоставихме цялата съществена информация, свързана с промяната на URL адреса, без презареждане на страницата в JavaScript.
Заключение
За да промените/промените URL адреса, без да опреснявате уеб страницата, използвайте „ pushState() ” метод или „ replaceState() ” метод. Методът „pushState()“ добавя новия URL адрес като нов запис в стек с история и позволява на потребителите да навигират напред и назад. Докато методът “replaceState()” замества URL адреса и не позволява преминаване към задната страница. Тази статия описва методите за промяна на URL адреса без презареждане на уеб страницата с помощта на JavaScript.