Объекты window.location и window.history в JavaScript используются для управления URL-адресом и историей браузера соответственно. Несмотря на то, что они связаны, они служат разным целям и должны использоваться в зависимости от конкретных требований вашего приложения. В этом руководстве мы рассмотрим различия между этими объектами и дадим рекомендации о том, когда использовать каждый из них.

окно.местоположение

Объект window.location представляет URL-адрес текущей страницы и предоставляет методы для управления URL-адресом. Вот некоторые из методов и свойств, предоставляемых объектом window.location:

  • window.location.href: возвращает полный URL-адрес текущей страницы, включая протокол, домен, путь, параметры запроса и идентификатор фрагмента. Вы также можете установить это свойство, чтобы изменить текущий URL-адрес.
  • window.location.protocol: возвращает протокол (например, «http:» или «https:») текущей страницы. Вы также можете установить это свойство для переключения между протоколами HTTP и HTTPS.
  • window.location.hostname: возвращает имя хоста (например, example.com) текущей страницы. Вы также можете установить это свойство, чтобы изменить имя хоста.
  • window.location.pathname: возвращает путь (например, «/path/to/page.html») к текущей странице. Вы также можете установить это свойство, чтобы изменить путь.
  • window.location.search: возвращает параметры запроса (например, «?key1=value1&key2=value2») текущей страницы. Вы также можете установить это свойство, чтобы изменить параметры запроса.
  • window.location.hash: возвращает идентификатор фрагмента (например, «#section1») текущей страницы. Вы также можете установить это свойство, чтобы изменить идентификатор фрагмента.

Вы также можете использовать методы window.location.assign() и window.location.replace() для изменения URL-адреса текущей страницы. Метод assign() загружает новый документ и заменяет текущий документ в истории сеанса, тогда как метод replace() заменяет текущий документ, не создавая новую запись в истории сеанса.

история окна

Объект window.history предоставляет методы для управления историей браузера. Вот некоторые из методов, предоставляемых объектом window.history:

  • window.history.back(): загружает предыдущую страницу в истории браузера.
  • window.history.forward(): загружает следующую страницу в истории браузера (работает, только если следующая страница существует в вашем списке истории).
  • window.history.go(n): загружает страницу, которая находится на расстоянии n шагов от текущей страницы в истории браузера. Положительное значение для n загружает страницу в прямом направлении, а отрицательное значение загружает страницу в обратном направлении.

Вы также можете использовать методы window.history.pushState() и window.history.replaceState() для добавления или изменения записей в истории браузера без перезагрузки страницы. Метод pushState() добавляет новую запись в стек истории, а метод replaceState() заменяет текущую запись.

Когда использовать window.location против window.history

Вот несколько рекомендаций о том, когда использовать window.location и window.history в вашем приложении:

  • Используйте window.location для управления URL-адресом текущей страницы. Например, вы можете использовать его для изменения пути, параметров запроса или идентификатора фрагмента URL-адреса.
  • Используйте window.history для управления историей браузера. Например, вы можете использовать его для перехода на предыдущую страницу или добавления новой записи в стек истории.
  • Если вам нужно изменить URL-адрес текущей страницы без ее перезагрузки, используйте метод pushState() или replaceState() в window.history. Это полезно для создания одностраничных приложений или реализации маршрутизации на стороне клиента.
  • Если вам нужно перезагрузить текущую страницу или загрузить новую страницу, используйте метод assign() или replace() для window.location. Это полезно для перехода к новому URL-адресу и запуска полной перезагрузки страницы.
  • Будьте осторожны при использовании метода replaceState() для window.history, так как он заменяет текущую запись в стеке истории, не создавая новую запись. Это означает, что если пользователь нажмет кнопку «Назад» после использования replaceState(), он не сможет вернуться на предыдущую страницу.
  • Если вам нужно сохранить историю браузера при навигации по вашему приложению, вы можете использовать библиотеку маршрутизатора на стороне клиента, такую ​​как React Router или Vue Router. Эти библиотеки предоставляют декларативный способ определения маршрутов вашего приложения и управления навигацией между ними.
  • Имейте в виду, что изменение URL-адреса или истории браузера может повлиять на работу пользователя в Интернете и потенциально нарушить работу существующих закладок или ссылок. Обязательно тщательно протестируйте свое приложение и предоставьте пользователю соответствующую обратную связь при переходе между страницами или изменении URL-адреса.

Пример из реальной жизни

Представьте, вы разрабатываете общую боковую панель для разных интерфейсов. А ссылок несколько и нужно оптимизировать их поведение. Сейчас это просто тег ‹a› с атрибутом href. А после перехода по ссылке всегда перезагружает страницу полностью и скачивает все бандлы и файлы.

Вот пример того, как вы можете создать элемент ссылки с помощью HTML и JavaScript, который просматривает href ссылки и сравнивает его с текущим местоположением страницы. Если имя хоста то же самое, он использует API истории для перехода на новую страницу, в противном случае он продолжает поведение по умолчанию.

HTML:

<a href="<https://www.example.com/page>" class="my-link">Link to Example Page</a>

JavaScript:

// Get all links with class "my-link"
const links = document.querySelectorAll('.my-link');

// Loop through each link
links.forEach(link => {
  // Add an event listener for when the link is clicked
  link.addEventListener('click', function(event) {
    // Prevent the default behavior of the link
    event.preventDefault();
    // Get the href of the link
    const href = this.getAttribute('href');
    // Compare the hostname of the link with the current page location
    if (window.location.hostname === new URL(href).hostname) {
      // Use the history API to navigate to the new page
      history.pushState(null, null, href);
    } else {
      // Continue with the default behavior
      window.location.href = href;
    }
  });
});

В этом примере мы используем querySelectorAll(), чтобы получить все ссылки с классом my-link, а затем прокручиваем каждую ссылку, используя forEach(). Для каждой ссылки мы добавляем прослушиватель событий при нажатии на ссылку. Внутри прослушивателя событий мы предотвращаем поведение ссылки по умолчанию с помощью preventDefault(), а затем получаем атрибут href ссылки с помощью getAttribute(). Затем мы используем new URL() для создания нового объекта URL из href и сравниваем имя хоста ссылки с именем хоста текущей страницы, используя window.location.hostname. Если имена хостов совпадают, мы используем метод history.pushState() для перехода на новую страницу без перезагрузки страницы. Если имена хостов не совпадают, мы продолжаем действовать по умолчанию и переходим на новую страницу, используя window.location.href.

Заключение

В этом руководстве мы рассмотрели различия между window.location и window.history в JavaScript и предоставили рекомендации по использованию каждого из них. Не забудьте использовать window.location для управления URL-адресом текущей страницы и window.history для управления историей браузера. Если вам нужно изменить URL-адрес без перезагрузки страницы, используйте pushState() или replaceState(), а если вам нужно перезагрузить страницу или загрузить новую страницу, используйте assign() или replace(). Помните о потенциальном влиянии на работу пользователя в Интернете и используйте библиотеки маршрутизатора на стороне клиента для управления навигацией по приложениям.

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу