Disable backward/forward navigation and page refresh in browser
The navigation or refresh brings the user to the login page, instead of where the user was in the flow. UNICOM® Digital Transformation Toolkit (UDTT™) provides a solution to disable backward/forward navigation and page refresh in browser.
The solution is based on client-side code to disable the navigation or refresh by Keyboard and Toolbar Button.
Events & Implementations
There are 4 events you can moniter:
▪ Forward navigation
▪ Backward navigation
▪ Page refresh
▪ Leave (to other URL or Browser refresh)
UDTT adds default implementations for these 4 events to NavigationEngine.js .
▪ forward : function (evt), return true/false
▪ backward : function (evt), return true/false
▪ refresh : function (evt), return true/false
▪ leave : function (evt), return String to represent in Popup Dialog
UDTT defines the 4 handlers in js/config/navigationHandler.js:
▪ Name: back/forward/refresh/leave
▪ Handler: function(event)
Both Keyboard and MenuBar control can deal with the four handlers.
Keyboard
All Keyboard events are monitored by UDTT KeyBoardManager. UDTT provides default listeners at js/keymap/globalKeyMap.js, including
▪ F5 and its combinations(Ctrl+F5,etc) to refresh API of previous page
▪ Ctrl + R combination to refresh API
▪ Ctrl + right arrow key combination to forward API
▪ Ctrl + left arrow key combination to backward API
▪ BACKSPACE to backward API
In js/config/navigationHandler.js, users can change the handler to provide custom implementation
▪ Return false will disable the event and other value will enable the handling.
▪ Users can delete one or more pairs if they don’t want, such as leave.
ToolBar / Menu buttons
Toolbar/Menu buttons in Browser can also trigger back/forward/leave event. Refresh event is treated like leave.
back/forward
To capture the events, UDTT will
▪ Increase Hash after each page renders, except popupDialog and remoteFlow
▪ Monitor hashChange event
▪ When -- happens, call backward API and reject the change if the return value is “false”.
▪ When ++ happens, call forward API and reject the change if the return value is “false”.
leave
When the URL is changed, UDTT will monitor the leave event.
Leave Handler will:
▪ return a String instead of TRUE/FALSE.
▪ pop up a dialog asking if you leave or stay. Some browsers, such as IE and Chrome will display the returned String along with Leave or Cancel buttons.
▪ Leave: leave the page.
▪ Cancel: keep everything unchanged.
If you don't need leave handler, you can delete it.
