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

Метод 1: использование метода History.back() JavaScript
Пример кода:

function goBack() {
  window.history.back();
}

Объяснение:
Объект historyJavaScript предоставляет метод back(), позволяющий вернуться на предыдущую страницу в истории просмотров. Вызвав window.history.back()в функции goBack, вы можете легко реализовать функцию возврата.

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

<a href="javascript:void(0);" onclick="goBack();">Go Back</a>

Объяснение:
Используя тег привязки с событием onclick, которое запускает функцию goBack, вы можете создать кликабельный элемент, который действует как «возврат». кнопка. Установка для атрибута hrefзначения "javascript:void(0);"гарантирует, что страница не будет перезагружаться при нажатии на тег привязки.

Метод 3: использование метода History.go() JavaScript
Пример кода:

function goBack() {
  window.history.go(-1);
}

Объяснение:
Подобно history.back(), метод history.go()позволяет перемещаться по истории браузера. Передавая отрицательное число (-1) в качестве аргумента history.go(), вы можете добиться той же функциональности «возврата».

Метод 4. Использование API истории HTML5
Пример кода:

function goBack() {
  window.history.pushState({}, '', document.referrer);
}

Объяснение:
API истории HTML5 предоставляет различные методы управления историей браузера. В этом методе мы используем метод pushState()для замены текущего URL-адреса предыдущим URL-адресом в истории. document.referrerизвлекает URL-адрес предыдущей страницы, что позволяет нам реализовать функцию возврата.

Метод 5: использование элемента с JavaScript
Пример кода:

<button onclick="goBack()">Go Back</button>

Объяснение:
Вместо использования тега привязки вы также можете реализовать функцию «goBack», используя элемент <button>. Прикрепив к кнопке событие onclickи вызвав функцию goBack, вы сможете добиться желаемой функциональности.

Метод 6. Создание пользовательской кнопки «Назад» с помощью CSS
Пример кода:

<button class="go-back-btn">Go Back</button>

.go-back-btn {
  background-color: #f44336;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

const goBackButton = document.querySelector('.go-back-btn');
goBackButton.addEventListener('click', goBack);

Объяснение:
Этот метод позволяет создать собственную кнопку «Назад», применив стили CSS к элементу <button>. Используя JavaScript, вы можете добавить к кнопке прослушиватель событий и вызывать функцию goBackпри нажатии на нее.

Метод 7: реализация «goBack» со значком «Назад»
Пример кода:

<span class="back-icon" onclick="goBack()">&#8592; Go Back</span>

Объяснение:
В этом методе мы используем объект HTML (←) для отображения стрелки влево в качестве значка «Назад». Прикрепив событие onclickк элементу <span>и вызвав функцию goBack, мы даем пользователям возможность вернуться назад, щелкнув значок «Назад».