Detect if the user clicked the “back” button - Mobile Browsers

Question

I have very weird requirement.

Requirement says: On Product detail page,when product image is opened in lightbox then on pressing back button on browser in mobile, product detail page shall be shown, not previous page i.e. product grid page

So, i thought of searching that how to handle back button in cross browsers. Some solutions worked in Desktop browsers but none worked in Mobile Browsers

I tried below solution:

window.onload = function () {
if (typeof history.pushState === "function") {
    history.pushState("jibberish", null, null);
    window.onpopstate = function () {
        history.pushState('newjibberish', null, null);
        // Handle the back (or forward) buttons here
        // Will NOT handle refresh, use onbeforeunload for this.
    };
}
else {
    var ignoreHashChange = true;
    window.onhashchange = function () {
        if (!ignoreHashChange) {
            ignoreHashChange = true;
            window.location.hash = Math.random();
            // Detect and redirect change here
            // Works in older FF and IE9
            // * it does mess with your hash symbol (anchor?) pound sign
            // delimiter on the end of the URL
        }
        else {
            ignoreHashChange = false;
        }
    };
  }
};

Also tried this:

 if (window.history && window.history.pushState) {

$(window).on('popstate', function() {
  var hashLocation = location.hash;
  var hashSplit = hashLocation.split("#!/");
  var hashName = hashSplit[1];

  if (hashName !== '') {
    var hash = window.location.hash;
    if (hash === '') {
      alert('Back button was pressed.');
    }
  }
});

Tried this as well

window.onbeforeunload = function (e) {
        var e = e || window.event;
        var msg = ""
        $("#blueimp-gallery").hide();
        // For IE and Firefox
        if (e) {
            e.returnValue = msg;
        }

        // For Safari / chrome
        return msg;
     };

What are your browser requirements? history.pushState is available in most mobile browsers except Opera Mini. — SchattenJager, Sep 16 '16 at 18:20
All mobile browser. I really dnt care about Opera. And if you think that it is available in all browsers then how shall i hide lightbox by pressing back button and then after closing lightbox backbutton shall behave as default behaviour — Gags, Sep 16 '16 at 18:25

brichins · Answer 1 · 2017-07-19T20:02:09.173

As you've no doubt learned, onbeforeunload provides a way to simply cancel the navigation event (see this answer for a good place to start), but it doesn't always work the way you want in all browsers (many just show a confirmation popup no matter what you do, for security reasons). Give this a shot first if you haven't already; I don't see any attempts at cancellation in your current code example, just history manipulation.

Failing that, using hash routing might help with this - preferably via a library that manages the URL hash as unique view routes (baked into Angular, React, etc) and pushes changes to the history for you. Giving the modal state a unique URL (which typically wouldn't be done in my experience) means that going 'back' would just close the modal instead of reloading the page.

Detect if the user clicked the “back” button - Mobile Browsers

1 Answers1