it-blog.club
Изменяем урл при помощи JS

Изменяем урл при помощи JS

Сейчас я вам расскажу, как при помощи js мы можем легко и просто манипулировать урлом в браузере, не перезагружая страницу. Для этого мы воспользуемся следующей функцией: history.pushState(). Стоит обратить внимание на то, что она работает только с html5 поддерживаемыми браузерами! Имеет 3 параметра, в которых , мы можем по сути ничего не передавать т.е.:


history.pushState('','','');

В первом из методов мы передаём состояние объекта. Второй не что иное как Название (кстати, на сегодняшний день, он игнорируется...). И третий параметр есть сам урл.

В рамках данной статьи мы рассмотрим только третий.

В параметре урла от нас требуется просто передать строку, которая подставится в урл, от корня сайта.

Добавим урл

собственно наш урл будет, наверное самым простом: http://localhost/


var newUrl = '/catalog/?login=myLogin&page=phone';
 history.pushState('', '', newUrl);

После выполнения данного скрипта вы увидите в адресной строке: localhost/catalog/?login=myLogin&page=phone

Но будьте осторожны. Так как у нас изменился урл. То при нажатии обновлении страницы, браузер попробует зайти именно уже на новый урл. И если на вашем сайте нет раздела /catalog/ то вы увидите 404ю ошибку.

Изменим существующий урл

Второй пример пройдёт вот тут: localhost/catalog/samsung/?login=myLogin&page=phone


var arUrl = window.location.pathname.split('/');
 var newUrl = '/bazar/'+arUrl[2]+'/'+window.location.search;
 history.pushState('', '', newUrl);

1 строка: Получаем путь относительно хоста и при помощи сплита разбиваем на массив
2 строка: Составляем новый урл состоящий из слова 'bazar' + второй ключ нашего массива, который содержит слово samsung, и в конце добавили наши get
3 строка: Собственно сама замена.

После выполнения данного скрипта, вы увидите в адресной строке: localhost/bazar/samsung/?login=myLogin&page=phone

Изменяем GET параметры

Рассмотрим на том же самом примере.


var arUrl = window.location.search.split('&');
arUrl[0] = arUrl[0].slice(1);
var arr=[];
$.each(arUrl,function(i,elem){
 arr[i] = elem.split('=');
});
var newUrl = arr[0][0]+'='+arr[1][1]+'&'+arr[1][0]+'='+arr[0][1];
newUrl = window.location.pathname+'?'+newUrl;
history.pushState('', '', newUrl);

Разумеется данный скрипт является демонстрационным и, наверняка, самым простым. После его исполнения в адресной строке браузера произойдёт смена местами значений GET параметров. ?login=myLogin&page=phone поменяется на ?login=phone&page=myLogin. Ну а теперь по порядку.

  1. строка: Получаем массив разбитых GET параметров, символом &

  2. строка: Так как window.location.searche возвращает параметры совместно с разделителем - ?, то удаляем его.

  3. строка: Создаём массив

  4. строка: Пробегаемся по нашему массиву

  5. строка: Делим значение ключей.

  6. строка: Собираем новую строку с параметрами.
    Конечно данный пункт можно было сделать по другому, но в рамках урока сделаем самым простым образом.

  7. строка: Собираем новый урл

  8. строка заменяем урл

После выполнения скрипта, наш старый урл: localhost/catalog/samsung/?login=myLogin&page=phone
заменится на новый: localhost/catalog/samsung/?login=phone&page=myLogin

Собственно это всё, что я хотел вам сегодня рассказать. Оставляйте свои комментарии и не забывайте делиться этой записью в социальных сетях.


it-blog.club 2072
Автор: Ярослав Хмель


Если Вам понравилась статья, то можете поддержать блог переведя N сумму на кофе авторам или оплату хостинга!
В любом случае спасибо! А так же не забывайте про группу в ВК
ПОИСК ПО САЙТУ
Поддержать