Как сделать, чтобы при клике на кнопку «назад» с андройда юзер не вылетел с сайта?

Question

[del993788]

Здравствуйте. В андройде есть вот такой бар:

А у меня есть вот такая самописная "галерея": https://jsfiddle.net/n91jq25b/2/ . Жмёшь на большую — она становится еще больше, жмёшь на превью — она становится на место большой. Чтоб закрыть — нужно кликнуть по экрану.
Косяк в том, что, когда юзер откроет изображение на весь экран с андройда, он может для его закрытия вместо повторного клика по изображению, кликнуть по кнопке назад, которая есть у него на устройстве, на его баре. После этого нажатия юзер вылетит с моего сайта, что мне не нужно. Как сделать так, чтобы юзер не вылетел после нажатия на кнопку "назад", а просто закрыл изображение?

Answer 1

[del993788]

Решил проблему костылём: https://jsfiddle.net/n91jq25b/15/

var jactive = 0; // создаём переменную

addEventListener("popstate",function(e){
if (jactive == 1) { 
$('.fullimg').fadeOut(); // если переменная = 1, то выполняем какой-то код
$('.fullimgbox').empty()
jactive = 0;
} else {
jactive = 1;  // иначе, делаем переменную = 1.
}
},false);

Answer 2

[Назар Мокринский]

Попробуйте работать с History API. Когда открывается галерея меняйте URL страницы, а когда пользователь "вернется" назад отлавливайте это и закрывайте галерею.

Comments

[rPman]

Кнопка назад в вашем случае это переход на предыдущую страницу, если это была первая - закрытие всей закладки.

Можно просто у URL менять anchor (часть ссылки после символа # по стандарту физического запроса на сервер не будет происходить, зато приложение может отлавливать эти изменения.

[del993788]

А как отследить нажатие назад?
addEventListener "popstate" — реагирует на всё, что только можно, и даже на переход по якорю

[Назар Мокринский]

qqignatqq: Так вам по сути это и нужно. Смотрите как изменился URL и определяйте, открыта ли галерея и нужно ли её закрывать.

[del993788]

Назар Мокринский: https://jsfiddle.net/n91jq25b/3/ ну глянь. Жмёшь на картинку, а тебе alert раньше времени. Хотя алерт должен был быть только после нажатия "Назад"

[Назар Мокринский]

qqignatqq: Так вы же не проверяете ничего, а выдаете alert() на любое изменение URL, ровно это и происходит. Делайте проверки и вываливайте alert() по условию.

[del993788]

Назар Мокринский: Смотрите:
1. Я могу сделать проверку Url : window.location.href.indexOf("#img") > -1
но какой в этом толк, если у меня в начале меняется url, а потом срабатывает EventListener
2. Я могу добавить переменную, но она тоже никак не канает, потому что вначале меняется переменная, а потом проходит условие EventListener. https://jsfiddle.net/n91jq25b/8/

[Назар Мокринский]

qqignatqq: Боюсь вас просто сбивает с толку асинхронная природа происходящего. Не всегда события происходят в том порядке, в котором они написаны. В обработчике события popstate у вас есть аргумент e. Почитайте что это такое и зачем: https://developer.mozilla.org/en-US/docs/Web/API/W..., заводить переменную jactive вам по сути не нужно. Можете ещё поискать примеры использования History API чтобы лучше понять происходящее.

[del993788]

Назар Мокринский: короче сделал вот так:

var jactive = 0; // создаём переменную

addEventListener("popstate",function(e){
if (jactive == 1) { // если переменная = 1, то выполняем какой-то код
$('.fullimg').fadeOut();
$('.fullimgbox').empty()
jactive = 0;
} else { // иначе, делаем переменную = 1.
jactive = 1;
}
},false);

Answer 3

[Therapyx]

Как возможное решение, работайте со стейтами.
У вас должен быть листнер, который исполняет код при открытии картинки. Меняйте состояние на что-то подобное "pictureOpened" и при закрытие всеми возможными путями меняйте это состояние на "pictureClosed". Соотвественно так же с листнером, который обрабатывает кнопку "назад". Вроде бы это onKeyDown или onBackPressed. Дак вот в этом листнере "если статус = puctureOpened" - вызвать функцию аналогичную с кликом на картинку, которая ее закрывает, иначе {do defaulf}

Comments

[del993788]

Чтоб использовать addEventListener "popstate" , мне нужно добавить якорную ссылку, но теперь листенер реагирует на всё, что только можно, и даже на переход по якорю: https://jsfiddle.net/n91jq25b/3/

[Therapyx]

qqignatqq: я конечно не на все 100 понимаю JS/jQuery... Помню только с лекций чуток) но вот, я имел ввиду примерно такую реализацию.
https://jsfiddle.net/n91jq25b/14/
В этом случае как пример я сделал так, что если isActive == true, то кнопка назад вообще блокируется.
этот state isActive меняется на true ili false в зависимости от открытия или закрытия картинки, желательно это конечно вообще все в функциях делать. Ибо в этом примере придется дублировать код, а это не гут.