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