Finally a solution to disabling back button in mobile web app

Scriptcase 9 General
#1

I am ccertain all of you who have used SC in a mobile web app have been experiencing the same nightmare as I have. A well used feature of a phoone web app is that the user uses their back button on the device to go to the previous page. I had asked for assistance on this a year ago but never got a real answer. I have finally found something which I am happy to share. See below:
[SIZE=15px]Very simple and clean function to break the back arrow without interfering with the page afterward.[/SIZE]
[SIZE=15px]Benefits:[/SIZE]

  • Loads instantaneously and restores original hash, so the user isn't distracted by URL visibly changing.
  • The user can still exit by pressing back 10 times (that's a good thing) but not accidentally
  • No user interference like other solutions using onbeforeunload
  • It only runs once and doesn't interfere with further hash manipulations in case you use that to track state
  • Restores original hash, so almost invisible.
  • Uses setInterval so it doesn't break slow browsers and always works.
  • Pure Javascript, does not require HTML5 history, works everywhere.
  • Unobrusive, simple, and plays well with other code.
  • Does not use unbeforeunload which interrupts user with modal dialog.
  • It just works without fuss.
[SIZE=15px]Note: some of the other solutions use onbeforeunload. Please [B]do not[/B] use onbeforeunload for this purpose, which pops up a dialog whenever users try to close the window, hit backarrow, etc. Modals like onbeforeunload are usually only appropriate in rare circumstances, such as when they've actually made changes on screen and haven't saved them, not for this purpose.[/SIZE] [SIZE=15px][B]How It Works[/B][/SIZE] [LIST=1]
  • Executes on page load
  • Saves your original hash (if one is in the URL).
  • Sequentially appends #/noop/{1..10} to the hash
  • Restores the original hash [/LIST] [SIZE=15px]That's it. No further messing around, no background event monitoring, nothing else.[/SIZE] [SIZE=15px][B]Use It In One Second[/B][/SIZE] [SIZE=15px]To deploy, just add this anywhere on your page or in your JS:[/SIZE]

    <script> /* break back button */ window.onload=function(){ var i=0; var previous_hash = window.location.hash; var x = setInterval(function(){ i++; window.location.hash = “/noop/” + i; if (i==10){clearInterval(x); window.location.hash = previous_hash;} },10); } </script>