Prevent browser back button navigation without page focus or touch

Question

Without clicking/touching on anywhere inside page when click browser back button, navigation should be disable.

Below implementation only work when click inside page.

history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () =>{ // not getting activate without clicking inside page
console.warn('DISABLE BROWSER NAVIGATION');
history.forward();
}

https://stackoverflow.com/questions/57339098/chrome-popstate-not-firing-on-back-button-if-no-user-interaction — Sean W, Apr 15 '21 at 03:39
Does this answer your question? [Chrome popstate not firing on Back Button if no user interaction](https://stackoverflow.com/questions/57339098/chrome-popstate-not-firing-on-back-button-if-no-user-interaction) — Sean W, Apr 15 '21 at 03:39

score 0 · Answer 1 · answered Jan 06 '21 at 09:19

one of the best way is to open your application in a popup without controls but again depending upon your requirement this may not be applicable. Hope this helps. Something like below

function openPopup(){

  var pathname = (window.location.pathname);
window.open(pathname+'openpagePopup.html','','width=800,height=450,toolbar=no, menubar=no,scrollbars=no,resizable=no,dependent,screenx=80,screeny=80,left=80,top=20,scrollbars=no'); 
  return false;
}

The otherways are not trustworthy like you can show user an alert, but can not disable the back button, as per my knowledge. If you do the below make sure you check browser compatibility.

window.onbeforeunload = function() { 
 return "Write something here";
};

Update : I found there is a way to handle the page history. Incase that works, I have never tried, here is a link

JS - window.history - Delete a state

Prevent browser back button navigation without page focus or touch

1 Answers1