Как отследить нажатие кнопки «Назад» браузера?

Question

[Степан]

Я смог отследить backspace

$(document).keydown(function (e) {
            if(e.keyCode == 8){
                e.preventDefault();
                $('.go').find('input[name="back"]').val(1);
                $('.go').submit();
            }
        });

И отправить форму, тоже самое нужно для кнопки назад

Answer 1

[Сергей delphinpro]

addEventListener("popstate",function(e){
    alert('yeees!');
},false);

Comments

[Евгений Петров]

Это работает в рамках одной страницы, когда применяем pushStae, replaceState. При переходе со страницы на другую увы.

[Lenkoras]

На данный момент, а может быть и в момент написания, комментарий Евгения является достоверным лишь частично. Событие popstate срабатывает не при вызове таких методов истории, как pushState или replaceState, а именно по нажатию кнопки "Назад" или "Вперёд", что подробно описано в этой статье. Обработчик этого события вешается на объект window и сбрасывается при перезагрузке страницы или переходе на другой сайт.

Answer 2

[Денис Инешин]

На обычной странице вы никак не можете отследить подобное нажатие. Все что вы можете узнать - это то, что пользователь пытается покинуть страницу. Для этого вам нужен метод window.onbeforeunload.

Comments

[Евгений Петров]

Если тихо и незаметно, то уж тогда unload.

[Сергей Коноваленко]

Здравствуйте, Денис, у меня тоже возник подобный момент с браузерной кнопкой "Назад". Можете, пожалуйста, помочь решить вопрос, я Вам заплачу за работу. У меня на сайте есть модальное окно Bootstrap 4, в нем находится галерея (список миниатюр). По клику на миниатюру, картинка открывается в Lightbox .

Нужно с помощью JavaScript сделать так, чтобы, при первом клике на кнопку "Назад" (браузерная кнопка "Назад" или кнопка "Назад" на мобильном телефоне, которая обычно находится справа внизу) сначала закрывалось модальное окно Lightbox (если оно открыто), затем при следующем клике на кнопку "Назад" закрывалось модальное окно Bootstrap 4.

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

[Денис Инешин]

Сергей Коноваленко, просто изучите вопрос, это делается довольно просто: https://developer.mozilla.org/en-US/docs/Web/API/H...

Answer 3

[l_mikhail]

Если используете реакт, отследите событие удаления компонента (метод componentWillUnmount()) на классовом компоненте или используйте хук useEffect

useEffect(
() => {
тут что-то происходит после рендера
return () => {
а вот здесь можно запустить то, что Вы хотели отследить при нажатии кнопки "назад" в браузере
};
},
[props.source],
);