Menu
Im making an 'app like' web page. The actual page is wider than the browser viewport which has its overflow hidden. Clicking different links changes the CSS to animate to different sections. Here is a very simple demo: http://smartpeopletalkfast.co.uk/pos/
At this stage im working on a demo, not a production site. I want to intercept the browser back button, so if you've navigated to a section, you would be taken back to the previous section rather than leaving the web page. In a perfect world this would happen with the same animations ive used for navigating to sections.
Can this be achieved? From researching I dont think its possible to intercept and disable the default browser back button.
I know their are a lot of posts about disabling the browser back button on this site and normally the response is DONT! However going to different sections in my page is like navigating to separate pages, so I think what Im trying to achieve is in keeping with user expectations.
The way something similar seems to normally be achieved with AJAX based applications is using HTML5's History API. As I understand you need to add URLs with fragments to the browser's history so something like mysite.com#section2. Im not sure this will work for me however as the horizontal scrolling is not based on fragment links like vertical scrolling can be. Maybe I could use JavaScript to detect when the URL ends in a fragment like #section2 and alter the CSS so the 2nd section is in the viewport? I suppose there would be no way to animate to this though?
328
If you want to restrict users to back the previous page on your web application, the browser back button needs to be disabled. The browser's back navigation can be disabled with JavaScript. Use history. pushState() event and onpopstate property of the WindowEventHandlers to stop back navigation on browsers.
You can use the history. back() method to tell the browser to go back to the user's previous page. One way to use this JavaScript is to add it to the onclick event attribute of a button. Here, we create the button using a <form> element, containing an <input> element of the button type.
Your browser keeps a stack of records showing which pages you've visited in the current window's session. When you press the back button on your browser, it goes to the last page in that stack. HTML5 allows a nuisance web page to hijack that process by adding entries to the session history using the pushState command.
To disable the browser "Back" button for a specific page: Open the "UI" tab of the page description window ( "Description" option in the page popup menu). In the "Options" area, for the option "Browser "Back" button", select "Forbidden".
The idea of changing the native behavior of the back button on browser is definitely a red flag signaling something is being approached wrong, and is not really possible cross-browser.
I would handle the unload event for the browser to try and smoothly transition between states.
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
