-1

Possible Duplicate:
Is there a way to catch the back button event in javascript?

In my application I want only a certain number of scripts (Text1.php, Text2.php and Text3.php) to contain a piece of code where that if the user clicks on the back browser button, it will display a confirmation box like the one below:

confirm("You have clicked on the browser's back button. If you confirm to go back via the browser back button, you will be logged out and lose your current assessment details." + "\n" + "\n" + "Are you sure you want to go back and lose current assessment details?" + "\n" );

The requirments are the following:

  1. How to show the confirm if the user clicks on the back browser button?
  2. If user confirms the confirmation then navigate to Text4.php (This is where it logs out user)
  3. If user cancels confirmation then just close confirmation box so user can continue what they are doing (guessing this is something to do with return false;
  4. Only want this to happen for scripts (Text1.php, Text2.php and Text3.php)
  5. Need it to work on all major browsers (IE, Chrome, Firefox, Safari, Opera)

Thank you

Community
  • 1
  • 1
user1794342
  • 57
  • 1
  • 6
  • [https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload](https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload) – Ohgodwhy Nov 07 '12 at 04:19
  • http://stackoverflow.com/questions/4840457/can-javascript-hook-and-override-browser-back-and-forward-buttons – dchhetri Nov 07 '12 at 04:19
  • @Daedalus Yeah but I am trying to give them the option if they want to navigate away or not. Are you definitely sure it can't be done? If it can't be done then what is the next best thing to do? Because if the user uses a back button then it would really mess them up if they have created an assessment navigate to a new page, then go back and create the same assessment again. I can try disable back button but it doesn't work on all browsers I believe? – user1794342 Nov 07 '12 at 04:26
  • Assuming you implement this, I think you should change the text of the message. _"Are you sure you want to go back"_ - is pretty misleading given that you are not going to let them go back for OK _or_ Cancel. Redirecting to some other page is not going "back". (I'm assuming, of course, that the user hasn't actually gotten to the current page via Text4.php...) – nnnnnn Nov 07 '12 at 04:26
  • @nnnnnn Yeah you are right, I will rewrite the message if this can be implemented – user1794342 Nov 07 '12 at 04:27
  • check this http://stackoverflow.com/questions/136937/is-there-a-way-to-catch-the-back-button-event-in-javascript – 000 Nov 07 '12 at 04:27
  • I think it just depends which way is the best way to implement this. I think there can be various ways of doing it, depends which one is the most suitable – user1794342 Nov 07 '12 at 04:30
  • @RishiKalia I looked at the url, I am a bit confused on how it works but would that answer be able to achieve what I fully require if implemented correctly? – user1794342 Nov 07 '12 at 04:32
  • @Daedalus It absolutely is possible. Type something into the SO answer box below and hit the back button. – Cat Nov 07 '12 at 04:37
  • @Eric Well.. I was actually going off an answer I saw somewhere else, though I guess I misinterpreted it. – Daedalus Nov 07 '12 at 05:09

2 Answers2

6

Note: You should ONLY do this if you NEED to prevent the person from leaving (that is, if they've inputted some important data and will lose it by navigating away). Also note that you cannot customize the confirmation popup in more recent browsers. (Older browsers allowed customizing the confirmation message body.) These are the restrictions of such a feature.

You can use the beforeunload event to achieve this. In older browsers, you could return a custom string for the confirmation prompt:

$(window).bind("beforeunload", function() {
    return "HI"; // This will be shown in the confirmation popup in older browsers.
});​

However, as mentioned by @formicini in the comments, more recent browsers (Chrome 87, for example) do not allow a custom string. Returning any non-undefined value will show the confirmation prompt, but will just display the browser's generic message—even if it's a string.

$(window).bind("beforeunload", function() {
    return true; // Any non-undefined value will show generic confirmation popup.
});​

I would also suggest you unbind this upon someone leaving the page in the desired way (a cancel button?), or you may run into undesirable behavior.

For example:

$("a").click(function() {
    $(window).unbind("beforeunload");
});
Cat
  • 66,919
  • 24
  • 133
  • 141
  • Thanks this is exactly what I am looking for. I just want to ask and make make sure though that I am not able to navigate the user to the Text4.php page if they click on the back button to log them out? Is there a way I can included at least session destroy to at least destroy the session? – user1794342 Nov 07 '12 at 04:48
  • 1
    You cannot hook the return value of the "Leave this page" dialog, so you cannot sign them out only in that case. The only thing I can think is to set a cookie to true upon `beforeunload`, and unset it after 5 seconds or so (which means they stayed on the page). If it's set when they return to the previous page, then log them out by AJAX. This is ugly and potentially unpredictable, though. – Cat Nov 07 '12 at 04:50
  • this has disabled the backbutton rather than preventing going back after clicking the button – Swarne27 Nov 07 '12 at 04:51
  • 2
    That's what this method does; allows a user to choose to leave a page or not. You cannot simply *prevent* people from leaving, only allow them to choose. – Cat Nov 07 '12 at 04:52
  • This could be an interesting question to ask on SO to see people's thoughts on being able to log user out if they clicked on back button. Thanks :) Will this code be able to work on all browsers? or do I need to test it to find out? Also does the unbind go on the same page as the confirmation? – user1794342 Nov 07 '12 at 04:53
  • 1
    Now Chrome 87 will display a generic message instead of whatever string you return. – formicini Jan 12 '21 at 08:37
  • 1
    Thanks @formicini; I've updated the answer. – Cat Jan 13 '21 at 22:31
1

Can not because a browser security restriction but You can tell if the user navigates away from the page.

you can detect user leave page by this function

window.onbeforeunload = function (e) {
  var message = 'Are you sure ?';
  if (typeof e == 'undefined') {
    e = window.event;
  }
  if (e) {
    e.returnValue = message;
  }
  return message;
}
Kotzilla
  • 1,333
  • 18
  • 27