Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

window location JavaScript

Всем привет! Сегодня мы рассмотрим как в 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

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

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

Удачи!

Оцените статью

Еще статьи

map js

Group by sql

scroll js

hide show JQuery

gitignore GIT

входные данные PHP

CSS supports

javascript время

Как установить go

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.