Disable Browser Navigation Buttons for ADF 12c Web Applications

Recently, we got a request that a customer wanted the browser navigation buttons disabled on his ADF 12c application. As we know, it is not possible to disable the buttons of the browser by default (unless you want to build your own private browser ;)). So we had to find another solution.

Hence ADF 12c comes with great HTML5 support, we found the solution in the javascript HTML5 history API. With it, it is possible to recreate the last entry of the browser history stack. The idea is fairly simple:

Browser pops the top stack element with the popstate event; we push the same element on top again, so that the user stays on the same page. Even the code is very short and easy to implement:

1. Create a <af:resource type="javascript"> tag on your page and add the following content:

function onPageEntry(){            

               //push the initial state first, to keep the current state named and referencable
                history.pushState(null, null, 'name-of-your-page');

               //if popstate is fired, add the push to the event queue
                window.addEventListener('popstate', function(event) {
                history.pushState(null, null, 'name-of-your-page');

2. create a client listener at document-on-load level, that references the javascript function:

<af:document title="PageTitle" id="d1">
   <... many more tags>
   <af:clientListener method="onPageEntry" type="load"/>

That's it. One might say, that this is a very crude way to "disable" the functionality, but as it is still possible to rightclick the buttons and navigate back to your older history, I think this is a nice safety-approach for ADF applications, that does not affect the browser in general.