Disable(Override) browser back button functionality in ADF Application using JavaScript

Sharing is Caring

This is another JavaScript trick to disable browser back button functionality
In this example i am using two jspx pages – Page1 and Page2


browser back button

Added two buttons in both pages to navigate between pages

Source of Page1

<af:outputText value="Page 1" id="ot1" inlineStyle="font-size:medium;font-weight:bold;"/>
                <af:commandButton text="Go To Second Page" id="cb1" action="forward"/>


Source of Page2-

 <af:outputText value="Page 2" id="ot1" inlineStyle="font-size:medium;font-weight:bold;"/>
                <af:commandButton text="Go To First Page" id="cb1" action="backward"/>


Now see JavaScript function to disable back button functionality, In actual JavaScript doesn’t disable back button but override its default functionality
This function forces the browser to navigate forward instead of going back so on the click of back button first browser executes its default back operation but due to this function again navigates to forward and show the same page

function preventBackButton() {

Add this javascript to Page 1 and invoke using af:clientListener tag on page load

<af:clientListener method="preventBackButton" type="load"/>

Now run the application and check
Go to second page and the press back button – it returns to page one for a fraction of second but again navigates to Page 2
It means it is working.

Cheers 🙂 Happy Learning

Related Posts

0 thoughts on “Disable(Override) browser back button functionality in ADF Application using JavaScript”

  1. Thanks for sharing this, this was helpful n it works
    but if i have any requestScope or viewScope Variables, they will be lost.
    anything can be done to prevent that ?

Leave a Reply

Your email address will not be published. Required fields are marked *