I have something like a single page web application. To handle a back button click from the user I use the 'popstate' event:
I have something like a single page web application. To handle a back button click from the user I use the 'popstate' event:
In Firefox and Safari, the event works normally - instead of going to the previous page (login page), navigation inside the application occurs.
In Chrome, after the latest updates, the event is correctly called only once. If you press the "back" button a second time, the event will not work and the user will be taken to the login window.
Here's my code:
function removeBack(){
history.pushState(null, null, '');
window.addEventListener('popstate', function () {
console.log('backOneStep0') ;
backOneStep(0); // return to the previous application screen
history.pushState(null, null, '');
});
};
Note - if you click anywhere on the page before the second click, the event will fire a second time.
UPD. Here - Chrome popstate not firing on Back Button if no user interaction
They say that this is how it should be, but until recently everything worked! How then can you make a single-page application if you can’t catch the back button being pressed?
Last version of my code:
const state = { page_id: 1, user_id: 5 };
function f1() {
backOneStep(0);
history.pushState(state, '', '');
}
history.pushState(state, '', '');
window.addEventListener('popstate', f1 );
function backOneStep( flg ) {
console.log('backOneStep:',idStatus);
if ( idStatus == -2 ) {
return;
}
if ( idStatus == -1 ) {
toStart();
return;
}
if ( userId < 1 ) return;
if ( idStatus == 2 ) {
closeOneTask();
idStatus = 1;
return;
}
if ( idStatus == 3 ) { // ???
hideAttachFile();
idStatus = 2;
return;
}
and so on... Still work only once in Chrome :(