js изменить url без перезагрузки

Сейчас я вам расскажу, как при помощи 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. Ну а теперь по порядку.

Читайте также:  download windows 10 pro 64 bit

    строка: Получаем массив разбитых 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 , то просто не отменяю действие по умолчанию при клике на ссылке, и человек по ней переходит.

Это предположение имеет место быть? или есть более лаконичные варианты?

js изменить url без перезагрузки

1 ответ 1

Вот минимальный код который требуется для создания клиентского роутера. К сожаления в родной для SO песочнице он не будет работать, да и в браузере если подгружать из локального фала, наверное тоже, но с сервером это работает.

Привет. Думаю многим интересно как сделана смена адреса в адресной строке браузера (попросту смена URL без перезагрузки страницы) на таких сайтах, как Facebook, Vk.com и других.

js изменить url без перезагрузки

На самом деле сложного нет ничего! Это всё новое API для работы с историей браузера. Есть такая функция:

Читайте также:  delphi listbox выбранный элемент

Собственно говоря, для реализации смена 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 ещё не работает.

Оцените статью
Все о Windows 10
Добавить комментарий