Can we navigate to a different page if the user clicks on the back browser button?

Question

I recieved a very helpful answer from Eric on how to display a confirmation is the user clicks on a browser back button, giving the user the choice if they want to go back or not.

Below was his answer:

You can use the beforeunload event to achieve this.

$(window).bind("beforeunload", function() {
    return "HI"; // Return whatever message you want
});

Fiddle

(To use the fiddle, just reload the page or navigate away or whatnot.)

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");
});

QUESTION

Now below is something we discussed and we don't know if there is a clean way to do this but what I want to try and achieve is that if the user does confirm that they want to leave the page, then I want to navigate the user to a different script (Text4.php) and in this script it simply destroys the session and logs the user out. But I want to know if first of all if this is possible and second of all what is your ideas in order to answer this question?

I bet - even the question is stupid from a usability perspective - it has been asked before. — hakre, Nov 07 '12 at 13:21
possible duplicate of [How to change url and detect the back button](http://stackoverflow.com/questions/7538477/how-to-change-url-and-detect-the-back-button) - see also: https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history - Please please improve your research before asking a question, similar it was with a previous related one of yours: http://stackoverflow.com/questions/13263051/how-to-display-confirmation-if-user-clicks-on-a-back-browser-button - you are hopping from one copy-pasta to the other. — hakre, Nov 07 '12 at 13:23

score 1 · Answer 1 · answered Nov 07 '12 at 13:12

1

That is not possible. You cannot impersonate the user on what pages he visits. Don't try to control the browser for me, just make sure your page displays and works fine on the browser when I visit it.

answered Nov 07 '12 at 13:12

Nelson

49,283
8
68
81

Problem is that if he presses back button, he could mess up creating an assessment. E.g if you made questions ans answers for an assessment and then submit the page, you will be navigated to next page and all questions and nswers for that assessment will be stored in db. Now if you click on the back button and go back to same page and create questions and answers again for same assessment and submit page again, then everything will be stored in db again, you will have either duplicate records or 2 sets of questions and answers and it will mess everything up. This is why I want to log them out. – user1794342 Nov 07 '12 at 13:35

score 0 · Answer 2 · answered Nov 07 '12 at 13:14

0

No, afaik you can't change the url, when the user decides to close the tab, window or to navigate back. And this is for good reasons. I don't want anybody to navigate me to some affiliate / spam / whatever site, after I decided to leave the page :D

answered Nov 07 '12 at 13:14

Robin Drexler

4,307
3
25
28

Problem is that if he presses back button, he could mess up creating an assessment. E.g if you made questions ans answers for an assessment and then submit the page, you will be navigated to next page and all questions and nswers for that assessment will be stored in db. Now if you click on the back button and go back to same page and create questions and answers again for same assessment and submit page again, then everything will be stored in db again, you will have either duplicate records or 2 sets of questions and answers and it will mess everything up. This is why I want to log them out. – user1794342 Nov 07 '12 at 13:36

score 0 · Answer 3 · answered Nov 07 '12 at 13:16

0

Consider making an async call to your logout script, then point the user to desired page.

Markup

<a href="path/to/logout" id="yourlogoutlink">Logout</a>

JS

$("#yourlogoutlink").click(function(e) {

    e.preventDefault();

            if(!confirm("Leave the page?"))
                return;

    $.post( $(this).attr('href'), function(data){

        $(window).unbind("beforeunload");
        window.location.href = '/some/url';

    } );

});

answered Nov 07 '12 at 13:16

moonwave99

21,957
3
43
64

I don't quite know how if you click on the back button, that it will go to the logut out page if user confirms, this is because it looks like you are saying click on the log out link then do the `unbind("beforeunload");` can't I simply just do `$(window).bind("beforeunload", function() { return "Are your sure"; if(confirm("Leave the page?")) window.location.href = 'Text4.php'; return; });` So if user clicks on "Leave this page" button, it will navigated to Text4.php? – user1794342 Nov 07 '12 at 13:56

score 0 · Answer 4 · edited Jun 30 '13 at 19:35

0

You can try using History API...

You can try these cross browser APIs of it.

https://github.com/browserstate/History.js/

https://github.com/devote/HTML5-History-API

edited Jun 30 '13 at 19:35

balupton

47,113
32
131
182

answered Nov 07 '12 at 13:16

Waqar Alamgir

9,828
4
30
36

score -1 · Accepted Answer · answered Nov 07 '12 at 13:17

-1

You don't need JavaScript to do this. I would do the following in your initial page.

session_start();
if(isset($_session['token']){
 //do log out stuff
} else {
 $_session['token'] = //generate random var here
}

When the page loads it looks if a variable is set, if so log out, if not make it.

answered Nov 07 '12 at 13:17

Ryan B

3,364
21
35

what should the generated random var be? just anything or is it suppose to link to log out page? – user1794342 Nov 07 '12 at 13:37
Anything you want, some people use a combination of the date and time, and a random number. You can do a redirect to the log out page or, if you have your logout script in its own file, you can include it. – Ryan B Nov 07 '12 at 13:39

Can we navigate to a different page if the user clicks on the back browser button?

Fiddle

5 Answers5