Как сделать, чтобы при клике на кнопку «назад» с андройда юзер не вылетел с сайта?
Здравствуйте. В андройде есть вот такой бар:
А у меня есть вот такая самописная "галерея": https://jsfiddle.net/n91jq25b/2/ . Жмёшь на большую — она становится еще больше, жмёшь на превью — она становится на место большой. Чтоб закрыть — нужно кликнуть по экрану. Косяк в том, что, когда юзер откроет изображение на весь экран с андройда, он может для его закрытия вместо повторного клика по изображению, кликнуть по кнопке назад, которая есть у него на устройстве, на его баре. После этого нажатия юзер вылетит с моего сайта, что мне не нужно. Как сделать так, чтобы юзер не вылетел после нажатия на кнопку "назад", а просто закрыл изображение? |
Кнопка назад на телефоне в браузере обыкновенно вызывает window.history.back(), соответственно, помимо того что вы открываете картинку на full нужно еще изменять ссылку. Без перезагрузки страницы это позволяет делать browser history api.
Так что посмотрите в эту сторону. Код вашего приложения при этом, скорее всего очень сильно изменится. Если писать коряво без нормальных фреймворков, то выглядит примерно так https://jsfiddle.net/n91jq25b/11/, подключено jquery-history, правда в jsfiddle это работать не будет, попробуйте на локальном сервере. Вообще для решения таких задач обычно используют абстракцию router. |
Решил проблему костылём: 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); |
Только теперь не открывается окно увеличенное. в опере по крайней мере.
|
А просто добавить #hash при открытии изображения в фулл не?
|
Часовой пояс GMT +3, время: 09:26. |