Создание обратной ссылки HTML: использование тега <a> и document.referrer

Быстрый ответ

Для создания ссылки, которая позволит вернуться на предыдущую страницу, используйте тег <a> в сочетании с функцией history.back() JavaScript в атрибуте href. Код будет выглядеть следующим образом: <a href="javascript:history.back()">Вернуться назад</a>.

Основы HTML-ссылки для возврата на предыдущую страницу

Ссылка, возвращающая пользователя на предыдущую страницу, — это важный элемент навигации в HTML.

Применение history.back()

В JavaScript объект history хранит историю пользовательской активности, метод history.back() аналогичен действию кнопки "Назад" в браузере, перенаправляя пользователя на страницу, находящуюся перед текущей в истории браузера.

Подробнее об этом расскажет наш спикер на видео

Роль document.referrer

Еще один способ создать ссылку для возврата – использовать свойство document.referrer, которое соответствует URL страницы, с которой пользователь пришел на текущую. Это позволяет динамически изменять значение href для создания ссылки, но document.referrer работает по-разному в разных браузерах.

Отображение URL при наведении

При использовании document.referrer или строки в href в формате javascript:, URL будет отображаться при наведении курсора на ссылку, как обычно ожидает пользователь.

Продвинутые методы и предупреждения

Дополнив ссылку дополнительными атрибутами HTML и обработчиками событий JavaScript, можно улучшить ее функциональность.

Воспользуйтесь подсказками

Используйте обработчики событий onmouseover и onmouseout, чтобы превратить вашу ссылку в интерактивный элемент, отображающий URL предыдущей страницы в всплывающей подсказке при наведении курсора.

Гарантированное возвращение

Если вы используете JavaScript, обязательно пропишите в обработчике события onclick вызов event.preventDefault(). Это предотвратит выполнение стандартного действия перехода по ссылке и возможное смешение записей в истории браузера.

Пошаговое создание возвращающей ссылки

Динамическая генерация ссылки возврата помогает сохранить стандартное взаимодействие с элементами страницы и другими функциями браузера.

Тестирование в различных браузерах

Проверьте ваше решение в разных браузерах, чтобы убедиться в его корректной работе и избежать непредвиденных проблем из-за особенностей браузера.

Практика: реализация и примеры

Представлены примеры реализации эффективной ссылки для возврата на предыдущую страницу.

Классическая ссылка для возврата

<!--Простая и наглядная ссылка для возврата-->
<a href="javascript:history.back()">Вернуться назад</a>

Динамическая ссылка для возврата с отображением URL

<script>
  // Грамотное использование ссылки
  var backLink = document.getElementById('back-link');
  if(document.referrer) {
    backLink.setAttribute('href', document.referrer);
  }
  backLink.addEventListener('click', function(event) {
    event.preventDefault();
    history.back();
  });
</script>
<a id="back-link" href="#">Вернуться назад</a>

Усовершенствованная ссылка с всплывающими подсказками

<!-- Ссылка с интерактивной подсказкой -->
<a href="#" 
   onmouseover="this.textContent=document.referrer" 
   onmouseout="this.textContent='Вернуться назад'"
   onclick="history.go(-1); return false;">Вернуться назад</a>

Визуализация

Представьте страницу сайта как комнату в лабиринте:

🚪 Текущая комната (страница)

Как вернуться обратно в предыдущую комнату?

<a href="javascript:history.back()">Вернуться в предыдущую комнату</a>

Это похоже на поиск секретного прохода в библиотеке, чтобы мгновенно отправиться назад.

🚶‍♂️🔙🚪

Имитация кнопки «Назад»: святой грааль управления

Разработчики стремятся контролировать навигацию в интерактивных веб-приложениях, создавая свои ссылки для возврата:

<script>
  // Управляем навигацией, как режиссер управляет съемками
  function goBack() {
    history.back();
  }
</script>
<button onclick="goBack()">Вернуться назад</button>

Благодаря использованию объекта history, обычная кнопка превращается в специализированную кнопку возврата.

Сохранение целостности истории браузера

Чтобы сохранить историю браузера без путаницы и дубликатов, используйте метод go(-1).

<!-- Сохраняем чистоту истории с помощью ссылки для возврата -->
<a href="#" onclick="event.preventDefault(); history.back();">Вернуться назад</a>

Этот подход обеспечивает отсутствие неожиданных дубликатов в истории браузера, которые могут сбить пользователя с толку.

Полезные материалы

1. <a>: Элемент якорный – HTML: HyperText Markup Language | MDN – подробное руководство по элементу-якорю.
2. HTML Links Hyperlinks — дружественное руководство для новичков по созданию HTML-ссылок.
3. Links in HTML documents — официальные рекомендации W3C о работе со ссылками.
4. Links | HTML Dog — доступное руководство по HTML-ссылкам для начинающих.
5. History API – Web APIs | MDN — детальное изучение навигационной истории.
6. Just a moment... — обзор эффективных методов навигации с помощью якорных ссылок.