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

Метод 1. Использование объекта истории JavaScript
Пример кода:

<a href="#" onclick="history.go(-1); return false;">Go Back</a>

Объяснение:
Объект historyв JavaScript предоставляет доступ к истории сеансов браузера. Использование метода go()с отрицательным значением (в данном случае -1) позволяет нам перейти на предыдущую страницу.

Метод 2: использование объекта JavaScript window
Пример кода:

<a href="#" onclick="window.history.back(); return false;">Go Back</a>

Объяснение:
Как и в предыдущем методе, мы также можем использовать объект window.historyдля перехода на предыдущую страницу. Метод back()дает тот же результат, что и history.go(-1).

Метод 3: использование псевдопротокола HTML javascript:
Пример кода:

<a href="javascript:history.go(-1)">Go Back</a>

Объяснение.
При таком подходе мы напрямую указываем код JavaScript в атрибуте hrefтега привязки. При нажатии на ссылку выполняется код JavaScript, и браузер возвращается на предыдущую страницу.

Метод 4. Реализация кнопки с прослушивателем событий
Пример кода:

<button id="goBackButton">Go Back</button>
<script>
  const goBackButton = document.getElementById("goBackButton");
  goBackButton.addEventListener("click", () => {
    history.go(-1);
  });
</script>

Объяснение:
В этом методе мы создаем элемент кнопки и присоединяем к нему прослушиватель событий. При нажатии кнопки прослушиватель событий запускает код JavaScript для возврата на предыдущую страницу.

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