Всем привет! Сегодня мы рассмотрим как в js работать с данными в адресной строке и совершать всевозможные манипуляции. Поехали!

Первое что мы рассмотрим - это редирект средствами js.

Для того чтобы сделать редирект или перенаправление на другую страницу нужно:

window.location = http://js-test/faq.html;

Как видите объекту location мы присвоили url на который будет произведено перенаправление.

Теперь давайте рассмотрим основные свойства объекта location которые позволяют получать значения адресной строки

Рассмотрим на примере такого url - http://js-test/child.html?id=1&type=get#hash

window.location.href ; // полный адрес url (http://js-test/child.html?id=1&type=get#hash)
window.location.protocol; //протокол url (http:)
window.location.host; //Имя хоста (js-test)
window.location.pathname; //Относительный путь к странице ( /child.html )
window.location.search; //Строка параметров адресной строки (?id=1&type=get)
window.location.hash; //Строка хэша или якора (#hash)

Мы также можем изменять эти свойства путем присваивания им новых значений

Примеры

window.location.pathname = "/index.html"; /*Перейти на другую страницу(http://js-test/index.html?id=1&type=get#hash)*/

window.location.search = "?new=1"; //Установить новые параметры /* http://js-test/child.html"?new=1#hash */

window.location.hash = #newhash; // Поменять якорь /* http://js-test/child.html?id=1&type=get# newhash */

Все это прекрасно, что если нам нужно узнать предыдущий url со всеми его параметрами?

Для этого существует замечательное свойство referrer

document.referrer; //Отображает предыдущий url со всеми параметрами

то есть отобразить полный url, кроме hash, страницы с которой было совершено перенаправление

Я думаю очень часто нам в адресной строке приходится видеть подобные вещи

http://js-test/index.html?newwindow=1&rlz=1C1BLWB_enRU768&ei=wqHyWcb0A8STadb1v5AN&q=%D0%BA%D0%B0%D0%BA+%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C+%D0%B8+%D0%BF%D0%B5%D1%80%D0%B5%D0%B1%D1%80%D0%B0%D1%82%D1%8C+%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+%D0%B8%D0%B7+%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8+%D1%81+%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E+js&oq=%D0%BA%D0%B0%D0%BA+%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C+%D0%B8+%D0%BF%D0%B5%D1%80%D0%B5%D0%B1%D1%80%D0%B0%D1%82%D1%8C+%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D1%8B+%D0%B8%D0%B7+%D0%B0%D0%B4%D1%80%D0%B5%D1%81%D0%BD%D0%BE%D0%B9+%D1%81%D1%82%D1%80%D0%BE%D0%BA%D0%B8+%D1%81+%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E+js&gs_l=psy-ab.3...430978.466415.0.466626.103.83.20.0.0.0.154.6073.75j6.81.0....0...1.1.64.psy-ab..2.82.4691...0j0i131k1j0i67k1j0i10i1k1j0i10i1i67k1j0i10i67k1j0i10i1i42k1j0i3k1j0i22i30k1j33i22i29i30k1j33i160k1j33i21k1.0.sfEPGbNjSm0

Не очень читаемо не правда ли? Так вот для того чтобы преобразовать всю эту абро-кадабру к более менее читаемому виду в js существует специальная функция decodeURI

console.log(decodeURI(window.location.href));

Результат

http://js-test/index.html?newwindow=1&rlz=1C1BLWB_enRU768&ei=wqHyWcb0A8STadb1v5AN&q=как+получить+и+перебрать+параметры+из+адресной+строки+с+помощью+js&oq=как+получить+и+перебрать+параметры+из+адресной+строки+с+помощью+js&gs_l=psy-ab.3...430978.466415.0.466626.103.83.20.0.0.0.154.6073.75j6.81.0....0...1.1.64.psy-ab..2.82.4691...0j0i131k1j0i67k1j0i10i1k1j0i10i1i67k1j0i10i67k1j0i10i1i42k1j0i3k1j0i22i30k1j33i22i29i30k1j33i160k1j33i21k1.0.sfEPGbNjSm0

Ну это уже более менее.

На этом данная статья у нас подходит к концу. Я очень надеюсь что смог доходчиво донести до вас всю информацию и вы не раз еще ей воспользуетесь!

Удачи!