If a user clicks the browser's back button, then I want a prompt to appear and ask for confirmation. If the user clicks 'OK', then it should navigate to xx.html. If the user clicks 'Cancel', then it should prevent the navigation. How can I do this?
Note: Already I tried the onbeforeunload method, but it is working for all the navigation actions. For Example, clicking the link on the page will also fire this event and show the message to the user.
You can't. The best you can do is use onbeforeunload and remove that event when clicking on a normal link:
<script type="text/javascript"> window.onbeforeunload = function() {return "Are you sure?"} </script> <a href="somewhere.html" onclick="window.onbeforeunload = null;">Leave</a> 
<form> submissions too.
on(before)unload or try to control where the user navigates to (including controlling the back/forward buttons), then your whole concept is broken. Your concept needs to embrace the features of the web (and browsers) not work against it.There's no way to differentiate between navigational actions in the onbeforeunload event. You could disable it for all links/forms on the page by removing the window.onbeforeunload handler in each link's onclick handler, or onsubmit for forms. However, you will still be unable to tell whether the user clicked back, forward, a bookmark, etc or typed a new address into the address bar.
Firstly, you need to capture the "beforeunload" event (which previous answers here did).
// Display browser warning message when back/forward/reload or hyperlink navigation occurs $(window).on('beforeunload', function(e) { console.log('page navigation captured'); return 'By leaving this page you will lose the data you have entered here.'; }); More importantly, you want to allow non-disrupted navigation from certain elements (e.g. links with class "allow-navigation"). The way to achieve is to remove the event-handler when your links of choice are clicked.
// Disable capture for certain elements $('.allow-navigation').on('click', function(e) { $(window).off('beforeunload'); console.log('page navigation allowed'); }); Will work for your links of the type:
<a href="#" class="allow-navigation">Click me</a> This way you can control the page navigation. Browser back/forward/etc still open the confirmation box. But the links you choose will work without any disruption.
Hope this helps.
you can do this
$(window).bind("beforeunload", function() { return "Are you Sure you want to leave this page?"; // Return whatever message you want });also if xx.html is the page in their history than you dont need to add anything just return a message it will automatically put buttons for you
Edit: see fiddle before you assume it does not answer the question asked http://jsfiddle.net/Lxq93/
Edit: there is no definitive way to display a message only on the back button in my knowledge i have also looked and have seen the only methods that pick up on the back button are
$(window).bind("beforeunload",function(){return;})and$(window).onbeforeunload = function(){return;}and they both pick up on when the page is refreshed or any other navigation away from the current page. This is currently the best answer that can be provided in the year 2014
Edit:
above is for all unload events
been messing with that through all its lower objects it cant be done through javascript till someone decides to make all major browsers use a specific name for each unload event instead of it just being an unload event
so the answer is no you cannot force a navigation to a specific page when they click okay on the confirmation when they try to go to a different page
and back button does not have a specific event name it shares its event with several different events all in the unload event so you cannot make a back button specific function through javascript
