How to make sure that when clicking on the "back" button from the android, the user does not fly out of the site?

Question

JavaScript

Hello. In android there is such a bar:

And I have such a self-written "gallery": https://jsfiddle.net/n91jq25b/2/ . Click on the big one - it becomes even larger, click on the preview - it becomes big in place. To close, you need to click on the screen.
The jamb is that when the user opens the image in full screen from the android, he can close it instead of clicking on the image again, click on the back button that he has on the device, on his bar. After this click, the user will fly out of my site, which I do not need. How to make sure that the user does not fly out after clicking on the "back" button, but simply closes the image?

Answer 1

Solved the problem with a crutch: 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

Try working with the History API . When the gallery opens, change the URL of the page, and when the user "comes back" catch it and close the gallery.

Answer 3

As a possible solution, work with states.
You should have a listner that executes code when the image is opened. Change the state to something like "pictureOpened" and when closing in all possible ways, change this state to "pictureClosed". Accordingly, the same with the listner, which handles the "back" button. It seems to be onKeyDown or onBackPressed. So here in this listner "if status = puctureOpened" - call a function similar to clicking on the picture that closes it, otherwise {do ​​defaulf}