Enabling the back button without allowing manual changes through the URL

Question

I have a jQuery Mobile application I'm developing. jQuery Mobile uses pushState by default to allow the browser's back button to work dynamically.

Now, my application is meant to change its pages dynamically, and the user should always arrive at the front page when loading the application.

The problem is, jQuery Mobile updates the page's hash in the URL whenever I go to a page in the application. Now, if the user enters the same hash in the application, jQuery Mobile will automatically take them to that page (when I'd want them to be handled by my code). Also, if they refresh the page, I'd like my code to take them back to where they should be, not directly moved to the hash the URL had.

To prevent this, I tried to add the following code in the mobileinit event:

$.mobile.hashListeningEnabled = false;

This works, but it also disables the pushState updates, which in turn breaks the back button, which I don't want to happen.

What would be the best way to allow users to use the back button while still not allowing manual movement between pages?

Answer 1

I don't have so much element to describe a possible and accurate solution for your problem, but an easy one should be this:

on every link on your page that take to another one attach a function like this:

$(DOMElem).on("click",function(){
  sessionStorage["urlChangedByLink"] = "true";
});

On the same page you can try if there are no problem with this:

$( window ).on( "navigate", function( event, data ) {
  if(sessionStorage["urlChangedByLink"] == "true")
    $.mobile.hashListeningEnabled = true;
  else
    $.mobile.hashListeningEnabled = false;
});

Or this, on the other page you check if this storage variable exsist and than make your operation:

if(sessionStorage["urlChangedByLink"] == "true")
  continue navigation...
else
  window.history.back();