Как отменить стандартное действие при нажатии на кнопку "Назад" сразу после открытия страницы

165

15 октября 2021, 13:30

Хочу отменить стандартное действие при нажатии на кнопку "Назад", есть функция, которая отслеживает нажатие на кнопку "Назад"

window.onpopstate = function(event) {
    event.preventDefault(); //отменить стандартное действие
    alert('zdes'); 
};

Чтобы она сработала необходимо, выполнить команду history.pushState, хочу выполнить её сразу при загрузке страницы, вот так:

<script>
    history.pushState({questionID: '555'}, null, null);
</script>

Но в Хроме она работает только когда выполняется какое-то действие на странице, например, клик или скрол, а если человек перейдя на страницу сразу нажал назад history.pushState не срабатывает. Как быть? В моём случае, создает сильные неудобства. Прошу помогите.

Вот ссылка на код в jsfiddle: https://jsfiddle.net/3t9uhf1w/

Чтобы убедиться, перейдите по этой ссылке через Хром, и сразу вернитесь обратно не выполняя никаких действий, нажав кнопку "назад" - вы вернетесь и не произойдет ничего, а затем попробуйте снова, перейдите по ссылке и выполните любое действие, например клик (в любой области) и нажмите "назад", выведется сообщение zdes и возвращение не выполнится.

Answer 1

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

Человек видит что сайт ему не подходит и жмёт кнопку чтобы вернуться к результатам поиска, но... Кнопка не работает и перехода обратно к результатам поиска не происходит. Очевидно, это неожиданное и неприятное поведение браузера.

Разработчики браузеров тоже так считают, потому, например, в Хроме начиная с версии 75 такое поведение, как вы хотите, было запрещено.

Хорошо, представим себе что вы хотите такое поведение не из каких-то скверных мотивов, а по какой-то действительно нужной причине (какой - в исходном вопросе не объяснено), то можно сделать следующее:

На самой странице нарисовать кнопки вперед и назад. Эти кнопки будут использовать history.back и forward, а поведение этих кнопок вы будете полностью контролировать. Затем можно в каждой ссылке передавать какой-то код, и возвращать ошибку если открыта страница с кодом меньшим, чем последний использованный. Надо ли говорить что это ломает браузер и весьма неприятно для пользователей, хотя я, к сожалению, видел такие сайты в природе.
Характерной причиной желать такого поведения будет повторная отправка POST запроса по возврату. Т.о., например, в БД будет создаваться дубль той же самой записи. Решением этой проблемы будет переадресовывать пользователя с кодом 302 на другую или ту же страницу с результатами после обработки POST запроса. Тогда кнопка "Назад" не будет приводить к повторному запросу.
Если переходы идут внутри вашего сайта, то одним решение будет взять на себя обработку перехода по внутренней ссылке, то есть загружать новую страницу в фоне и подменять отображаемый вид. Ссылку в адресной строке тоже нет проблемы поменять при переходе по такой ссылке. Тогда кнопка "Вернуться" будет делать всё, что вы хотите. Для пользователя будет выглядеть будто всё работает как обычно, но на деле он будет работать с одностраничным приложением, которое меняет адресную строку как оно считает будет удобно.

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