Как сделать так, чтобы переходить между страницами без перезагрузки, но так чтобы url страницы менялся?
-
5History API – MedvedevDev 13 сен '17 в 18:30
-
Что-то подобное я видел на blacknegative.com – ishidex2 17 сен '17 в 7:18
1 ответ
В HTML документе метод history.pushState()
добавляет новое состояние в историю браузера
Метод pushState()
принимает 3 параметра: state
, title
(который в данный момент игнорируется), URL
. Давайте рассмотрим каждый параметр подробнее:
State — JavaScript объект, который связан с новой записью в истории браузера, созданной при помощи
pushState()
. Всякий раз, когда пользователь перемещается на новое состояние истории браузера при помощи таких функций, как, напримерhistory.back()
илиhistory.go()
, срабатывает событие popstate, а в объект event передаётся свойствоstate
.Title — в данный момент Firefox игнорирует данный параметр. Тем не менее аргумент может передаваться. Передача пустой строки вместо
title
должна быть безопасной с учётом будущих изменений метода. В качестве альтернативы можно передаватьtitle
в объектеstate
и использовать его оттуда.URL — URL новой записи в истории браузера передаётся в этом аргументе. Обратите внимание, что браузер не будет пытаться загрузить данный URL после вызова
pushState()
, но эту попытку можно сделать позднее, например, после перезапуска браузера. Новый URL не обязательно должен быть абсолютным. Если он относительный, тогда он образуется от текущего URL.
var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';
var url = 'hello-world.html';
history.pushState(state, title, url);