Отключение кнопки назад в браузере без влияния на таймер

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

// Мы запрашиваем у пользователя подтверждение перед предотвращением действия кнопки "назад"
window.onbeforeunload = function() {
  return true;
};

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

Уведомляем пользователя о возможных последствиях действий

Стройте грамотный пользовательский интерфейс, предупреждая пользователей о возможной потере данных прежде, чем они покинут страницу или случайно воспользуются кнопкой «назад»:

// Скрипт, предупреждающий обо всех последствиях
window.onbeforeunload = function(e) {
  e = e || window.event;
  // Для работы со старыми браузерами и IE требуется своеобразный подход
  if (e) {
    e.returnValue = 'Вы точно решили забыть обо всём и закрыть страницу? Ваши данные могут пропасть!';
  }
  // Новые браузеры учтут следующее уведомление
  return 'Подтвердите свою готовность к отсутствию последующих мучительных страданий о пропащих данных!';
};

Данный способ не запрещает кнопку "назад", но побуждает пользователей принять обдуманное решение, прежде чем покинуть страницу.

Полный контроль: API истории

Если требуется более гибкое управление процессом навигации, как в случае со SPA (одностраничными приложениями), используйте History API:

// Добавляем новую запись в историю браузера
history.pushState({}, '');

// Реагируем на нажатие кнопки "назад"
window.onpopstate = function(event) {
  if(event.state){
    // Здесь можно обрабатывать переход, например, осуществлять редирект
  } else {
    // Информируем пользователя о том, что использование кнопки "назад" не приведёт к результату
    history.pushState({}, '', window.location.href);
  }
};

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

Основной функционал: Обеспечивайте его работу

Убедитесь, что все внесённые вами изменения не влияют на работу основных функций веб-сайта. Таймеры и прочие элементы страницы должны функционировать как обычно. Важным моментом является и кроссбраузерность: постоянно проводите анализ того, как ваши решения отображаются в разных браузерах.

Этика и безопасность взаимодействия

Не забывайте, что полный контроль над кнопкой "назад" может повлечь ответственность и безопасностные риски. Именно поэтому прямое устранение работы этой кнопки не рекомендуется. Иногда достаточно просто указать правильное направление или оставить доброжелательное предупреждение.

Исследуйте неординарные подходы

Использование хэша для блокировки навигации назад

Постоянно обновляйте window.location.hash, создавая замкнутый цикл для кнопки "назад".

// "Назад" не существует!
window.location.hash = 'no-back';

// Если хэш изменяется — вновь обновляем его
window.onhashchange = function() {
  window.location.hash = 'no-back';
};

Таким образом вы создате неразрешимое условие для работы кнопки "назад".

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

Механика "хлебных крошек"

Желайте предотвратить попытки пользователя возвращаться назад, предложите ему альтернативные варианты, например, навигацию посредством "хлебных крошек":

// Укажу дорогу тебе, словно компас.
// Пример "хлебных крошек": Главная > Каталог > Оформление заказа

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

Представьте дорожку пользователя через сайт в виде маршрута:

Путь пользователя по сайту: 🛣️ [Главная страница ➡️ Страница продукта ➡️ Страница оформления заказа]

Блокировка возможности возврата с использованием JavaScript ассоциируется с установкой знака "нет прохода":

🚫🔙: ["Извините, но путь назад не предусмотрен! Пожалуйста, продолжайте путешествие вперёд или оставьте сайт."]

Цель состоит в том, чтобы ориентировать пользователя, а не замыкать его в рамках сайта:

window.history.pushState(null, null, window.location.href);  // Создаём новую запись в истории, без сочинений и декламаций
window.onpopstate = function () {
  window.history.go(1);  // Игнорируем попытку возврата назад, как мы каждое утро игнорируем будильник
};

Помните, что мы не ограничиваем пользователя, а перенаправляем его:

🛑🛣️🔄 [Решившись вернуться, пользователь мягко перенаправляется дальше]

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

Завершение заполнения форм: Охрана данных

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

Последовательность навигации

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

Совместимость с браузерами

Убедитесь в корректной работе ваших решений во всех основных браузерах. Воспользуйтесь сервисами Can I Use и MDN Web Docs, чтобы проверить совместимость реализованных функций.

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

1. History API – Web APIs | MDN — подробнейшее руководство по работе с History API для упрощённых манипуляций историей браузера.
2. Как отключить кнопку "назад" в браузере с помощью JavaScript? – Stack Overflow — авторитетные ответы сообщества на вопрос о сценариях предотвращения функционирования кнопки "назад".
3. Событие popstate окна – Web APIs | MDN — информация о событии «popstate», которое упрощает управление нажатием кнопки "назад".
4. Использование HTML5 History API | CSS-Tricks — практическое пособие по HTML5 History API для разработки SPA.
5. Всплытие и перехват – JavaScript Info — объяснение механизма всплытия и перехвата событий, который является одним из ключей к пониманию веб-навигации.
6. Можно ли использовать... Таблицы поддержки для HTML5, CSS3 и т. д. — инструмент для проверки поддержки History API в разных браузерах.
7. Объект истории окна — обзор объекта window.history со всевозможными примерами кода.