Назад к предыдущей странице в JS: кнопка 'Отмена'

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

Для того, чтобы вернуть пользователя на предыдущую веб-страницу, нужно подключить вызов функции window.history.back() к обработчику события onclick. Этот обработчик можно поместить прямо в разметку кнопки:

<button onclick="window.history.back()">Назад</button>

Описанная выше кнопка активизирует переход на предыдущую страницу при её нажатии, что аналогично действию кнопки "назад" в браузере.

Дополнительные возможности и функциональность

Отмена отправки формы

Чтобы предотвратить отправку формы при совершении перехода, можно использовать return false; внутри onclick:

<button onclick="window.history.back(); return false;">Отмена</button>

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

Переход на несколько страниц назад

Для перехода на несколько шагов назад в истории браузера используйте функцию history.go(-x). Здесь x — это число страниц, которое вы хотите строго определить:

<button onclick="history.go(-2)">Назад на две страницы</button>

Замена кнопки ссылкой

Иногда вместо кнопки уместно использовать стилизованную ссылку:

<a href="#" onclick="window.history.back(); return false;">Назад</a>

Добавление javascript:void(0); в атрибут href позволяет отключить стандартное поведение ссылки, сохраняя при этом возможность навигации по событию onclick.

О функции back()

Функции window.history.back() и history.back() взаимозаменяемы. Однако, применение префикса window способствует лучшей читабельности кода и помогает избежать недопонимания в контекстах с множественными окнами.

Ясное приглашение к действию

Визуальное выделение кнопки "Отмена"

Для улучшения взаимодействия пользователя с сайтом можно улучшить видимость кнопки "Отмена" с помощью стилей CSS:

.cancel-button {
  background-color: #f44336; /* Красный цвет делает кнопку более заметной */
  color: white;
}

Пример использования на практике

Применение класса для стилизации кнопки:

<button onclick="window.history.back(); return false;" class="cancel-button">Отмена</button>

Уточнение назначения кнопки

Если кнопка используется для навигации, а не для отправки формы, указывайте её тип как button:

<button type="button" onclick="window.history.back();">Назад</button>

Работа с встраиваемым JavaScript

Решение конфликтов

Для разделения JavaScript от HTML и упрощения процесса отладки, можно задать событие onclick напрямую через JavaScript:

document.getElementById('goBackButton').addEventListener('click', function() {
    history.back();
});

Ненужные части кода

Префикс window. не обязателен, но он может помочь новичкам быстрее разобраться с кодом:

<button onclick="window.history.back(); return false;">Назад</button>

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

Если воспринимать историю браузера как временную шкалу, можно легко понять принцип работы навигации:

1. Старт: Дом 🏠
2. Переход в магазин 🏪 (по ссылке)
3. Переход в парк 🌳 (по другой ссылке)
4. Возврат к предыдущей точке: 🌳 ➡️ 🏪

JavaScript позволяет управлять историей:

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

Дополнительные соображения

Кросс-браузерная совместимость

Функции history.back() и history.go(-1) поддерживаются большинством браузеров. Однако, следует учитывать совместимость с более старыми версиями.

Обработка в динамической среде

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

Управление в истории

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

Отслеживание изменения истории

Событие window.onpopstate позволяет реагировать на моменты изменения состояния пользовательского интерфейса.

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

1. Свойство history окна – Веб-API | MDN — Базовая информация об использовании API истории для навигации.
2. Кнопка "Назад" | CSS-Tricks — Понятное руководство к созданию кнопки назад.
3. Метод back() истории — Урок по использованию метода back() в JavaScript.
4. Событие клик – Веб-API | MDN — Детальное описание события клика в JavaScript.
5. Событие click | Документация API jQuery — Управление событием клика с помощью jQuery.
6. Всплывающие и перехватываемые события — Статья о механизме распространения событий в DOM.
7. javascript – Что такое всплывающие и перехватываемые события? – Stack Overflow — Дискуссия о всплывающих и перехватываемых событиях на форуме Stack Overflow.