Back: примеры (JAVASCRIPT)

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

Базовый вызов функции для возврата на одну страницу назад.

// Вызов при клике на кнопку
const backButton = document.getElementById('backBtn');
backButton.addEventListener('click', () => {
  window.history.back();
});

// При клике браузер перейдет на предыдущий URL в истории.

Вызов напрямую из консоли или кода.

// Простой вызов
window.history.back();
// Или просто
history.back();

// Сразу инициируется переход назад.

Похожие методы History API

• history.forward(): Переход на одну страницу вперед по истории. Аналог кнопки "Вперед" в браузере.
• history.go(n): Универсальный метод для навигации по истории. Принимает целочисленный аргумент. history.go(-1) эквивалентно history.back(), history.go(1) — history.forward(). Можно переходить сразу на несколько шагов.
• history.pushState() и history.replaceState(): Эти методы не осуществляют навигацию, а изменяют запись в истории браузера без перезагрузки страницы. pushState() добавляет новую запись, replaceState() модифицирует текущую. Часто используются в SPA вместе с событием popstate.

Когда что использовать: back() и forward() удобны для простых навигационных действий. go() дает больше контроля, если нужно переместиться на несколько шагов. pushState/replaceState — ключевые инструменты для построения клиентского роутинга в современных веб-приложениях.

Типичные ошибки

1. Ожидание мгновенного перехода и выполнение кода после вызова. Поскольку back() асинхронна, код после нее выполнится до завершения навигации.

console.log('Начинаем переход');
history.back();
console.log('Этот код выполнится сразу, а не после перехода');
// Не стоит здесь обращаться к обновленному DOM

Начинаем переход
Этот код выполнится сразу, а не после перехода

2. Использование в iframe без доступа к родительской истории. Если iframe и основная страница имеют разные источники (разные домены), доступ к истории родителя из iframe будет ограничен политикой безопасности CORS.

3. Вызов, когда история пуста. Если в истории сессии нет предыдущей страницы (пользователь открыл страницу в новой вкладке), вызов history.back() не произведет никакого видимого эффекта. Для обработки этого случая можно проверять свойство history.length.

if (history.length > 1) {
  history.back();
} else {
  console.log('Некуда возвращаться');
  // Альтернативное действие, например, закрытие модального окна
}

Изменения в последних версиях

Сам метод history.back() остается неизменным и стабильным на протяжении многих лет, так как является частью фундаментального History API.

Основные изменения касаются не самой функции, а контекста ее использования. Современные браузеры, особенно в режиме инкогнито или при строгих настройках, могут ограничивать доступ к методу из-за политик безопасности. Также появились и развиваются более новые API для навигации, такие как Navigation API, который предлагает более продвинутый интерфейс для управления навигацией и историей, особенно в контексте одностраничных приложений. Однако history.back() продолжает поддерживаться для обратной совместимости.

Расширенные примеры

1. Комбинация с событием popstate. Для реакции на переход, инициированный back().

window.addEventListener('popstate', function(event) {
  console.log('Произошел переход по истории. Текущее состояние:', event.state);
  // Можно обновить интерфейс в соответствии с event.state
  updateUIForState(event.state);
});

// Программный вызов перехода
history.back();

// В консоль будет выведено сообщение, когда браузер обработает переход.

2. Предотвращение ухода со страницы. Вместе с событием beforeunload или onbeforeunload. Обратите внимание, что современные браузеры сильно ограничивают кастомизацию сообщений в beforeunload.

// Установка обработчика, который сработает при попытке уйти (включая history.back())
window.onbeforeunload = function(e) {
  if (hasUnsavedChanges) {
    // Стандартизированный способ — возврат строки (хотя браузер может ее игнорировать)
    e.preventDefault();
    e.returnValue = ''; // Требуется для Chrome
    return ''; // Для старых браузеров
  }
};
// Теперь при вызове history.back(), если hasUnsavedChanges === true,
// браузер покажет диалог подтверждения.

3. Создание кастомной кнопки "Назад" с логикой.

document.querySelector('.custom-back-btn').addEventListener('click', (e) => {
  e.preventDefault();
  // Если открыто модальное окно, сначала закрываем его
  const modal = document.querySelector('.modal.show');
  if (modal) {
    closeModal(modal);
    return;
  }
  // Если мы на определенной глубине SPA-роута, делаем popstate навигацию
  if (currentAppRouteDepth > 1) {
    router.go(-1); // Пример вызова роутера приложения
  } else {
    // Иначе используем стандартный переход браузера
    history.back();
  }
});

4. Эмуляция многократного возврата. С использованием history.go().

// Вернуться на 3 шага назад
goTimes(-3);

function goTimes(steps) {
  if (history.length > Math.abs(steps)) {
    history.go(steps);
  } else {
    // Если шагов больше, чем записей в истории, идем на самое начало
    history.go(-(history.length - 1));
  }
}

Аналоги в других языках

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

Python (веб-фреймворк, например, Flask/Django): На сервере управление "назад" обычно реализуется через редиректы или сохранение состояния в сессии.

# Flask пример редиректа на предыдущую страницу
from flask import request, redirect, url_for

@app.route('/go-back')
def go_back():
    # Возврат на предыдущую страницу (если referer указан)
    return redirect(request.referrer or url_for('index'))

Сервер отправляет браузеру команду 302 Redirect на URL из заголовка Referer.

PHP: Аналогично, с использованием заголовка HTTP_REFERER.

// PHP редирект назад
header('Location: ' . $_SERVER['HTTP_REFERER']);
exit;

Выполняется серверный редирект.

Эти подходы принципиально отличаются от history.back(), так как требуют нового запроса к серверу и полной перезагрузки страницы, в то время как JavaScript-метод работает на клиенте в рамках текущей сессии и может не вызывать перезагрузку (например, при использовании с pushState).