Объект Location относится к объектной модели браузера (BOM, или Browser Object Model) и отвечает за сведения о текущем адресе страницы, а также позволяет перенаправить пользователя на нужную страницу или перезагрузить текущую. Это очень полезный объект, который может заменить вам такой html-элемент, как ссылка, по своему функционалу.
Поскольку объект Location подчиняется непосредственно глобальному объекту Window, то доступ к нему можно получить таким образом:
|
1 2 3 |
window.location //или просто location |
У объекта Location есть ряд свойств и методов, которые мы рассмотрим в этой статье, а также постараемся ими воспользоваться.
Свойства объекта Location
location.hash- устанавливает или возвращает якорную часть (#) текущего адреса (URL);location.hrefвозвращает адрес (URL) текущей страницы или устанавливает адрес (URL) нужной страницы;location.hostnameвозвращает доменное имя веб-хоста;location.pathnameвозвращает путь и имя файла текущей страницы;location.protocolвозвращает использованный веб-протокол (http: или https:);location.portвозвращает номер порта текущей страницы (по умолчанию порт 80 для протокола http и 443 для https);location.origin- возвращает протокол, имя хоста и номер порта URL;location.searchвозвращает часть URL после знака "?" вместе с этим знаком, которая отвечает за передаваемые параметры. Например, в адресеhttp://mysite.com/?post=34&user_id=3467свойствоlocation.searchвернет?post=34&user_id=3467. Пример использования этого свойства вы найдете в статье про обработку события onmousemove.
Методы объекта Location
location.assign('url нового документа')загружает новый документ по указанному в скобках адресу. В отличие отlocation.replace(), метод добавит новую запись в стек истории.;location.replace('url нового документа')- заменяет текущий документ на тот, URL которого указан в качестве параметра в скобках. Не сохраняется в истории браузера (заменяет запись в стеке истории), т.е. при нажатии кнопки "Назад" в браузере вы не вернетесь на предыдущую страницу;location.reload()- перезагружает текущий документ. В качестве необязательного параметра можно указать значениеtrue, и тогда произойдет принудительное обновление страницы с сервера. Если параметр не указан или имеет значениеfalse, то обновление страницы происходит из кэша браузера. Методreload()- это программный вариант нажатия кнопки обновить в вашем браузере.
Использование свойств и методов объекта Location
Давайте посмотрим, каким образом мы можем использовать свойство location.href для того, чтобы перейти к определенному поисковику. Поисковик будем выбирать из выпадающего списка. Выбор пользователя обработаем с помощью события onchange.
Обратите внимание, что при изменении выбора новый URL загружается в текущей вкладке, заменяя собой данную статью. Вернуться вы можете с помощью нажатия кнопки "Назад" в браузере.
Код примера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form name="searchForm"> <select name="searchSelect"> <option value="#">Выберите поисковик</option> <option value="https://google.com">Google</option> <option value="https://yandex.ru">Yandex</option> <option value="https://www.msn.com/ru-ru/">MSN</option> <option value="https://meta.ua">Meta.ua</option> <option value="https://search.tut.by/">Tut.by</option> <option value="http://kaz.kz/">Kaz.kz</option> </select> </form> <script> document.searchForm.searchSelect.onchange=function(){ location.href=this.value; } </script> |
Несколько видоизменим наш предыдущий пример, заменив ссылки и пункты в выпадающем списке на категории сайта. Для обработки используем все то же событие onchange, но внутри него запишем метод location.assign().
Код будет таким:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form name="categoryForm"> <select name="categorySelect"> <option value="#">Выберите категорию сайта</option> <option value="/category/bootstrap/">Bootstrap</option> <option value="/category/javascript/">JavaScript</option> <option value="/category/javascript/es6/">ES6</option> <option value="/category/jquery/">jQuery</option> <option value="/category/html/">HTML</option> <option value="/category/css/">CSS</option> </select> </form> <script> document.categoryForm.categorySelect.addEventListener('change',function(){ location.assign(this.value); }); </script> |
Обратите внимание на значение в атрибуте value тегов <option>: поскольку мы даем ссылки на текущий сайт, то и сама ссылка может быть относительной, а не абсолютной. Также в двух примерах мы использовали разные подходы к написанию обработчика события.
location.search и URLSearchParams
В том случае, если в поиске участвует много параметров, вам может понадобится, например, их отличать. Для этого может быть использован API URLSearchParams, который позволяет получить или отформатировать поисковые параметры из URL. Это удобный инструмент для работы с URL-адресами, который может быть использован для получения, добавления, удаления и изменения параметров поиска в URL.
|
1 2 3 |
let location.href = 'http://mysite.com/test.html?name=John&age=21'; const searchParams = new URLSearchParams(window.location.search); console.log(searchParams.get('name')); // выводит значение параметра "name" из текущего URL |
Создание параметров запроса в виде экземпляра класса URLSearchParams
Вы можете создать параметры поиска, просто создав экземпляр класса URLSearchParams с помощью ключевого слова new и параметра в виде строки запроса.
|
1 |
const searchParams = new URLSearchParams('param1=value1¶m2=value2'); |
Добавление параметров
Добавление параметров поиска в URL осуществляется с помощью метода append(name, value). Он добавляет параметр с указанным именем и значением в конец строки запроса.
|
1 |
searchParams.append('param3', 'value3'); |
Запись параметров
Запись параметров поиска в URL осуществляется с помощью метода set(name, value). Нужно указать сам параметр и его новое значение.
|
1 |
searchParams.set('param1', 'new_Value'); |
Получение значения параметра
Другой метод get(name) позволяет получить значение параметра поиска из URL по указанному имени этого параметра.
|
1 |
console.log(searchParams.get('param1')); // "new_Value" |
Проверка наличия параметра
Как и в коллекции Map, в экземпляра класса URLSearchParams можно проверить, есть ли определенный параметр поиска в URL с помощью метода has(name). Он возвращает true, если параметр с указанным именем присутствует в URL, и false в противном случае.
|
1 2 |
console.log(searchParams.has('param1')); // true console.log(searchParams.has('param10')); // false |
Получение имён/значений всех параметров
В том случае, если вам нужен список имен (названий) всех параметров поиска в URL, используйте метод keys(). Он возвращает итератор, который перебирает имена всех параметров.
|
1 2 3 |
for (const nameOfParam of searchParams.keys()) { console.log(nameOfParam ); } |
Если же нужны значения, то цикл мы запускаем с использованием метода values():
|
1 2 3 |
for (const valueOfParam of searchParams.values()) { console.log(valueOfParam ); } |
И оба варианта в виде параметра и его значения в формате [name, value] можно получить с помощью метода entries():
|
1 2 3 |
for (const [paramName, paramValue] of searchParams.entries()) { console.log(paramName + ': ' + paramValue); } |
Сортировка и удаление параметров
Поскольку по сути параметры собираются в псевдомассив, то вы можете его отсортировать методом searchParams.sort(). В этом случае параметры будут упорядочены по их именам в алфавитном порядке.
Он удаляет параметр с указанным именем из строки запроса можно методом delete, указав нужный параметр: searchParams.delete('param1');
Приведение параметров к строке
Приведение параметров поиска в URL к строке осуществляется с помощью метода toString(). Он возвращает строку, содержащую параметры поиска в URL.
|
1 2 |
const searchParamsStr = searchParams.toString(); console.log(searchParamsStr); |
