Реализация кнопки "Назад" на Navigation API

заметка

Вариант реализации кнопки "Назад" в интерфейсе вашего сайта, которая ведет себя, как браузерная кнопка "Назад"

Содержание

Иногда нас просят реализовать в интерфейсе сайта кнопку “Назад”, которая ведет себя, как кнопка “Назад” из браузерной панели управления. Такое поведение можно легко реализовать с помощью History API. Но если нам требуется показывать кнопку “Назад” только при условии непустой истории навигаций, History API уже не решает проблему.

Задача

Если пользователь только что открыл страницу и не переходил по ссылкам, то кнопка “Назад” не показывается. Если пользователь переходил по ссылкам, то кнопка “Назад” будет показана до тех пор, пока пользователь не вернется на первоначальную страницу, двигаясь назад по истории навигаций.

Решение

Используем Navigation API.

const backBtn = document.getElementById("backBtn")
if (navigation.canGoBack) {
    backBtn?.classList.remove("hidden")
}

Смотри также