Сейчас я вам расскажу, как при помощи js мы можем легко и просто манипулировать урлом в браузере, не перезагружая страницу. Для этого мы воспользуемся следующей функцией: history.pushState(). Стоит обратить внимание на то, что она работает только с html5 поддерживаемыми браузерами! Имеет 3 параметра, в которых , мы можем по сути ничего не передавать т.е.:
В первом из методов мы передаём состояние объекта. Второй не что иное как Название (кстати, на сегодняшний день, он игнорируется. ). И третий параметр есть сам урл.
В рамках данной статьи мы рассмотрим только третий.
В параметре урла от нас требуется просто передать строку, которая подставится в урл, от корня сайта.
Добавим урл
собственно наш урл будет, наверное самым простом: http://localhost/
После выполнения данного скрипта вы увидите в адресной строке: localhost/catalog/?login=myLogin&page=phone
Но будьте осторожны. Так как у нас изменился урл. То при нажатии обновлении страницы, браузер попробует зайти именно уже на новый урл. И если на вашем сайте нет раздела /catalog/ то вы увидите 404ю ошибку.
Изменим существующий урл
Второй пример пройдёт вот тут: localhost/catalog/samsung/?login=myLogin&page=phone
1 строка: Получаем путь относительно хоста и при помощи сплита разбиваем на массив
2 строка: Составляем новый урл состоящий из слова ‘bazar’ + второй ключ нашего массива, который содержит слово samsung, и в конце добавили наши get
3 строка: Собственно сама замена.
После выполнения данного скрипта, вы увидите в адресной строке: localhost/bazar/samsung/?login=myLogin&page=phone
Изменяем GET параметры
Рассмотрим на том же самом примере.
Разумеется данный скрипт является демонстрационным и, наверняка, самым простым. После его исполнения в адресной строке браузера произойдёт смена местами значений GET параметров. ?login=myLogin&page=phone поменяется на ?login=phone&page=myLogin. Ну а теперь по порядку.
-
строка: Получаем массив разбитых GET параметров, символом &
строка: Так как window.location.searche возвращает параметры совместно с разделителем — ?, то удаляем его.
строка: Создаём массив
строка: Пробегаемся по нашему массиву
строка: Делим значение ключей.
строка: Собираем новую строку с параметрами.
Конечно данный пункт можно было сделать по другому, но в рамках урока сделаем самым простым образом.
строка: Собираем новый урл
После выполнения скрипта, наш старый урл: localhost/catalog/samsung/?login=myLogin&page=phone
заменится на новый: localhost/catalog/samsung/?login=phone&page=myLogin
Собственно это всё, что я хотел вам сегодня рассказать. Оставляйте свои комментарии и не забывайте делиться этой записью в социальных сетях.
Здравствуете. Наткнулся в инсте на изменение URL, но перезагрузка страницы не происходит. Если скопировать URL в другое окно но инфа тоже загружается.
Полагаю это как то так происходит: при клике по ссылке, отменяю действие по умолчанию копирую ее href в location.hash , а инфу подгружаю ajax’ом , а если браузер пользователя не поддерживает location.hash , то просто не отменяю действие по умолчанию при клике на ссылке, и человек по ней переходит.
Это предположение имеет место быть? или есть более лаконичные варианты?
1 ответ 1
Вот минимальный код который требуется для создания клиентского роутера. К сожаления в родной для SO песочнице он не будет работать, да и в браузере если подгружать из локального фала, наверное тоже, но с сервером это работает.
Привет. Думаю многим интересно как сделана смена адреса в адресной строке браузера (попросту смена URL без перезагрузки страницы) на таких сайтах, как Facebook, Vk.com и других.
На самом деле сложного нет ничего! Это всё новое API для работы с историей браузера. Есть такая функция:
Собственно говоря, для реализации смена URL без перезагрузки страницы больше ничего и не нужно.
При нажатии на кнопку, которая должна сменить URL, вы вызываете эту функцию, в истории показывается, что вы находитесь в состоянии, переданном в первом параметре (это может быть объект или строка), а адрес в строке браузера поменяется на указанный в 3-м параметре.
Для вас мы подготовили пример реализации смены URL без перезагрузки на простеньком сайте: http://htmler.ru/history.demo/
Если покликать по пунктам верхнего меню адрес сайта поменяется, а перезагрузки не произойдет.
Как сделать смена URL без перезагрузки?
Для удобства обработки кликов на кнопки мы использовали jquery, но код самой смены будет работать и без jQuery.
Опишу немного код:
После загрузки страницы (когда срабатывает document.ready) мы вызываем функцию doHistoryLogic (о ней чуть позже), а потом навязываем обработчики на события кликов мышки по кнопкам верхнего меню. Грубо говоря мы отменяем через e.preventDefault() стандартное действие при клике (переход по указанной ссылке), и делаем своё — ставим отметку, что ссылка активна, засовываем новое состояние с новым URL в историю и опять вызываем функцию doHistoryLogic.
Что же это за функция? Она просто берет текущее состояние истории и на основе этого состояния скрывает или показывает нужное содержимое. Тут может идти и простое скрытие элементов, как у нас, и прогрузка элементов через ajax — в общем тут уже дело ваших потребностей и фантазии.
Где работает смена URL без перезагрузки?
Работает во всех современных версиях Chrome, Safari, Firefox. В IE9 ещё не работает.