how to disable back and forward button navigation of web browser

how to disable back and forward button navigation of web browser.

You can’t.

Why do you need to disable those?

I’d claim that @quirky-zebra is only half right here (although usually he is right always :grin:) With Vaadin app you kind of can disable the forward button, by doing the whole UI in one route. Then, because the app is never going to new URL (not by real page reload nor using special browser trick we use in router), there is no next view (unless navigating back to the previous view from where one navigated to Vaadin app). If you want to disable that as well and can control the previous page that opens the Vaadin application, you could open the link into new window :sunglasses:

Please don’t teach him the ancient hashbang hack of v8 :crazy_face:

I’m tempted :sunglasses:

Hi Matti. How we can have whole UI in one route. Have you an example ?

While I doubt it’s the correct solution to your problem, you can do it by using a single @Route and placing all your components in it. You’ll need to handle all “navigation” in event listeners, so you’d for example hide the previous top-level layout and show the new one in a Button’s click listener. This is not a good solution for accessibility or code compartmentalization.

If this the solution to do that it’s not a good idea, that’s right. It will be very difficult to handle that and the visibility of the code wil be bad. My problem in my project is that when the user click on back button, a view that he has never displayed before is on the screen ?!

Clicking on the back button changes the URL, and you can react to that in a navigation event handler. Check the documentation here: Navigation Lifecycle | Routing & Navigation | Vaadin Docs

Note that the event handler may be in the view class or the parent layout.

OK thank you for your help ;-)

Note that whatever you do, you cannot make the browser disobey the user when the user clicks the button to go back to the URL that they were on previously.

If you change your application to navigate between “views” without changing the URL, then the “previous” URL from the browser’s point of view will instead be the URL that they were on before opening your application. This might be a completely different web page or something like about:blank or chrome://new-tab-page/. The back button will be disabled only if the user opened the browser tab directly from e.g. a bookmark.