0

I am using JSF 2.2 with PrimeFaces on WildFly 17 application server and want to disable the back-button of a browser.

I have already tried with:

https://stackoverflow.com/a/20321530/1925356

Avoid back button on JSF web application

https://stackoverflow.com/a/10305799/1925356

but I was not able to prevent the functioning of the browser's back-button. To be more precise, I have tried this in my xhtml template:

    <h:body>
    <script>
        const O_BACK_BUTON = "o-back-button";
        const NO_BACK_BUTON = "n" + O_BACK_BUTON;
        const CROME_NO_BACK_BUTON = "Again-N" + O_BACK_BUTON;
        
        jQuery(document).ready(function() {
            jQuery(document).ready(function() {

                window.location.hash = NO_BACK_BUTON;
                window.location.hash = CROME_NO_BACK_BUTON; // Again because google chrome doesn't insert first hash into history
                window.addEventListener ? window.addEventListener('hashchange', disableHash) : window.attachEvent('hashchange', disableHash);
            });
        });

        function disableHash() {
            window.location.hash = NO_BACK_BUTON;
        }
        
    </script>

But it does not work. (Almost) the same code works ins struts 1.0

What am I doing wrong?

Alex Mi
  • 1,409
  • 2
  • 21
  • 35
  • I would comment on those answers. JSF just renders HTML where you can use JavaScript. So, basically you've created a duplicate question. – Jasper de Vries Apr 06 '23 at 07:18
  • 1
    Does this answer your question? [How can I stop the browser back button using JavaScript?](https://stackoverflow.com/questions/12381563/how-can-i-stop-the-browser-back-button-using-javascript) – Jasper de Vries Apr 06 '23 at 07:18
  • I can't answer you in a comment, that is why I will edit my question above. Thank you! – Alex Mi Apr 06 '23 at 12:18
  • Try with MOVE_SCRIPTS_TO_BOTTOM https://primefaces.github.io/primefaces/12_0_0/#/gettingstarted/configuration – Jasper de Vries Apr 06 '23 at 12:23
  • It did not work. Perhaps some other config property from web.xml interferes... no idea! – Alex Mi Apr 07 '23 at 07:24
  • Could the problem lie in the fact that to et to the next view, I am always using ExternalContext.redirect instaed of just returning the new URL from the action method? – Alex Mi Apr 08 '23 at 05:06

1 Answers1

0

To disable the browser's back button in a Prime Faces application, you can use JavaScript to prevent the default behavior of the back button. Here's an example:

window.history.pushState(null, '', document.URL);
window.addEventListener('popstate', function(event) {
    window.history.pushState(null, '', document.URL);
});

This code uses the HTML5 History API to manipulate the browser's history and prevent the default behavior of the back button. The pushState method adds a new state to the history and changes the URL displayed in the address bar to the current URL. The popstate event listener captures the back button event and pushes a new state to the history, effectively preventing the user from navigating back.

You can add this JavaScript code in a <script> tag in the <head> section of your PrimeFaces application's HTML file, or include it in an external JavaScript file and include that file in your HTML file using the appropriate <script> tag.

Note: Disabling the browser's back button may not always be the best solution from a usability perspective, as it can interfere with the normal behavior of web browsers and may not be supported in all environments. It's important to consider the implications and potential drawbacks before implementing this functionality in your application.

Ajay Dhangar
  • 49
  • 5
  • PrimeFaces does not have an application HTML file; it uses the `p:head` tag to render a head. And indeed, preventing normal browser behavior is bad practice. – Jasper de Vries Apr 06 '23 at 11:07
  • You're right, PrimeFaces uses the `` tag to render the `` section in a JSF web application, instead of a standalone HTML file. – Ajay Dhangar Apr 06 '23 at 11:17