Override default behavior of browser back

Hello,

We have requirement where we need to override the default behavior of browser back event.

Suppose there are 2 pages, page1 and page2.

Below is requirement.

1. User navigate from page1 to page2.

2. There are server side validations on page2.

3. Here when user click on browser back, we need to submit the page, so server side validations gets triggered.

4. If there are errors, we need to stay on page2, else navigate to page1.

To check if user click on browser back, currently implemented in below way.

1. Created 2 session variables to store current and previous URL's.

2. When user come to page2, we store page1 URL in "previousURL" session variable.

3. On "onbeforeunload" event of page2, checked if "previousURL" session variable is same as "document.referrer", if same then submit the page.

function HandleBackFunctionality(event)

{

      previousURL = document.getElementsByName('previousURLForBrowserBack')[0].value;

      var document_referrer = document.referrer;

      document_referrer = document_referrer.split("?")[0];

      if (document_referrer == previousURL){

        var allButtons = document.getElementsByClassName('ownerSaveButtons')[0];

        goBackButton = allButtons.getElementsByTagName('input')[1];

        goBackButton.click();

        event.stopPropagation();

        event.preventDefault();

      }

}

Till here page is getting submitted on browser back, could see server side validation error messages.

But it is navigating to page1 and does not stay on page 2.

Tried below approaches to override default behavior of browser back, but they are not working.

event.stopPropagation();

event.preventDefault();

Please guide, help on whether above approach to detect browser back event is correct and how we should override default behavior.

Thanks and Regards,

Archana Gholap

Hi Archana Gholap,

1) We use onbeforeunload for the browser back button event.

2) Tried in my application like this,

$(window).on('beforeunload', function(){
      return 'Are you sure you want to leave?';
});

$(window).on('unload', function(){

         logout();
});

3) I have an Idea, If you don't want the user to go back the screen means, you can delete the history of that url I think so.

Hope it helps you little, Thanks.

Aravind M wrote:

Hi Archana Gholap,

1) We use onbeforeunload for the browser back button event.

2) Tried in my application like this,

$(window).on('beforeunload', function(){
      return 'Are you sure you want to leave?';
});

$(window).on('unload', function(){

         logout();
});

3) I have an Idea, If you don't want the user to go back the screen means, you can delete the history of that url I think so.

Hope it helps you little, Thanks.

Hi Aravind,

Thanks for reply..

I can try using first 2 points and check how my application behaves.

But I can't delete the history, because when there are no errors on page2, then it should navigate to previous page.

Thanks and Regards,

Archana Gholap