Enter
    Расширенный поиск
    Клавиша / esc

    JavaScript

    window.location

    Читаем информацию о текущем URL страницы.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    location — это объект хранящийся в window, который позволяет получать информацию о текущем адресе страницы и менять его с помощью функций или обновления полей объекта.

    Пример

    Скопировано

    С помощью location мы можем получить текущий адрес:

            
          
          // если выполнить этот скрипт на текущей странице доки в консолиconsole.log(window.location.href)// 'https://doka.guide/js/window-location/'
          // если выполнить этот скрипт на текущей странице доки в консоли
console.log(window.location.href)
// 'https://doka.guide/js/window-location/'

    Обновление текущей страницы можно произвести с помощью reload(). Этот метод делает то же самое, что и кнопка «Обновить» в браузере:

            
          
          window.location.reload()
          window.location.reload()

    С помощью replace() можно сделать клиентский редирект, это приведёт к мгновенному переходу по адресу, указанному при вызове метода:

            
          
          window.location.replace('https://doka.guide/')
          window.location.replace('https://doka.guide/')

    Как понять

    Скопировано

    Для навигации по сайту мы используем адреса и параметры страницы. window.location содержит набор свойств и методов, чтобы удобно получать адрес и управлять им.

    Как пишется

    Скопировано

    Свойства

    Скопировано
    Ссылка, на которой обозначены все свойства window.location

    href – полное представление адреса. Можно сказать, что это зеркало того, что находится в адресной строке браузера в данный момент. Если записать значение в это свойство, то произойдёт обновление адреса и редирект на новый адрес.

    Остальные свойства — это кусочки location.href. Они нужны, чтобы удобно получать каждый из них отдельно, а не вытаскивать их руками из полной строки адреса.

            
          
          console.log(window.location.href)// отобразит текущий адресwindow.location.href = 'https://example.com'// сделает переход по указанному адресу
          console.log(window.location.href)
// отобразит текущий адрес
window.location.href = 'https://example.com'
// сделает переход по указанному адресу

    protocol содержит текущий протокол по которому открыта страница. Чаще всего там будет https и http.

    host содержит значение хоста из ссылки. Хост включает в себя название текущего домена и порта.

    hostname — частичка с доменом из свойства host, не включает в себя порт.

    port — вторая составляющая значения host, содержит только номер порта. Если порт не указан в явном виде, то значением свойства будет пустая строка ''.

    origin включает в себя путь, начиная с protocol и заканчивая port.

    search содержит параметры в формате ключ=значение разделённые &. Если параметров нет, то значением будет пустая строка.

    hash — якорная ссылка включая символ #. Она находится в самом конце пути и отвечает за навигацию между размеченными на странице элементами с помощью установки атрибута id на тегах. Эта часть URL не передаётся на сервер. Если параметров нет, то значением будет пустая строка.

            
          
          window.location.hash = 'в-работе'// проскролит страницу до элемента с `id="в-работе"` если такой присутствует на страницеconsole.log(window.location.hash)// напечатает якорь
          window.location.hash = 'в-работе'
// проскролит страницу до элемента с `id="в-работе"` если такой присутствует на странице
console.log(window.location.hash)
// напечатает якорь

    pathname – репрезентация текущего пути на сайте. Если текущий урл не содержит путь, то значением будет корневой путь "/".

    Например, значения window.location.pathname в зависимости от адреса:

    • https://doka.guide/js/window-location/ → /js/window-location/.
    • https://doka.guide → /.

    Методы

    Скопировано

    assign(новый_путь) – метод вызывает переход на страницу, переданную в аргументах. После перехода на страницу пользователь может вернуться на страницу, с которой произошёл переход, с помощью браузерной кнопки назад.

    replace(новый_путь) аналогичен методу assign(), но адрес страницы с которой был вызван этот метод не будет сохранён в истории браузера. При попытке вернуться назад пользователь будет отправлен на страницу предшествующую той, с которой произошёл переход.

    reload() перезагружает текущую страницу.

    toString() приводит адрес страницы к строке. Возвращает то же самое значение, что и location.href.

    Читайте также