19

We have an administrative portal that our teachers constantly forget to download their latest PDF instructions before logging out and/or closing the browser window. I have looked around but can't find what I'm looking for.

I want to accomplish the following goals:

Goal 1

Before a user can close the browser window, they are prompted "Did you remember to download your form?" with two options, yes/no. If yes, close, if no, return to page.

Goal 2

Before a user can click the 'logout' button, they are prompted with the same as above.

My first pass at the very basic code (which does not work for browser close) is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function init() {
    if (window.addEventListener) {
        window.addEventListener("beforeunload", unloadMess, false);
    } else if (window.onbeforeunload) {
        window.onbeforeunload = unloadMess;
    };
}

function unloadMess() {
    var User_Message = "[Your user message here]"
    return User_Message;
}
</script>
</head>

<body onload="init();">
     hello this is my site
</body>
</html>

EDIT - NEW ISSUES

The solution provided below works but also has its own issues:

When user clicks the link to actually download the forms, the page thinks they are trying to leave and in turn present an error message to them! Also - I would like for one event or another to occur but not necessarily both. I.e. they hit 'logout' button and they are presented with the OnClick event, THEN the browser prompt. Any ideas?

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
JM4
  • 6,740
  • 18
  • 77
  • 125

4 Answers4

33

Update 2017

All modern browsers do not support custom messages any longer.

window.onbeforeunload = function(evt) {
   return true;
}

This one for closing the tab:

window.onbeforeunload = function(evt) {
    var message = 'Did you remember to download your form?';
    if (typeof evt == 'undefined') {
        evt = window.event;
    }
    if (evt) {
        evt.returnValue = message;
    }

    return message;
}

and use onClick event for logout button:

onClick="return confirm('Did you remember to download your form?');"
g t
  • 7,287
  • 7
  • 50
  • 85
Mohit Jain
  • 43,139
  • 57
  • 169
  • 274
  • 1
    Yikes - only one issue, when they click the link to actually download the forms, the page thinks they are trying to leave and in turn present an error message to them! – JM4 May 27 '10 at 20:13
  • Also - I would like for one event or another to occur but not necessarily both. I.e. they hit 'logout' button and they are presented with the OnClick event, THEN the browser prompt. Any ideas? – JM4 May 27 '10 at 20:15
  • 3
    The `evt` object can tell you what was clicked (i.e. `evt.target` or `window.event.srcElement` depending on browser). So you could choose to do nothing in the case where they've clicked on the form. – Ryley May 28 '10 at 18:24
  • 1
    It's not showing custom message on chrome. Default message _Changes you made may not be saved._ is displayed. – Musaddiq Khan May 25 '17 at 13:00
  • In Chrome this only works if you refresh the browser. – Cropis Jun 15 '18 at 03:57
2

I think that this may be part of your problem:

else if(window.onbeforeunload) {
  window.onbeforeunload = unloadMess;
};

That test in the "if" statement will only be true if there's already a handler function. That test doesn't mean, "does the window object have an 'onbeforeunload' property?". It means, "is the 'onbeforeunload' property of the window currently not null?".

I think it'd be safe to just set "onbeforeunload" directly, for any browser.

Pointy
  • 405,095
  • 59
  • 585
  • 614
1

You cannot alert or things like that in onbeforeunload, you cannot simply return false to make the user not leave the page, as with other events like onclick. This would allow a site to make it impossible to leave it.

You can however just return a string, the browser then shows a confirm dialog including your string asking the user whether they really want to leave.

Marian
  • 5,817
  • 2
  • 18
  • 21
  • I am not trying to prevent them from leaving, merely pointing out a script message and allowing them to select "yes or no" – JM4 May 27 '10 at 20:04
  • @JM4: I know, but if it was possible an evil site could do it. As the Yes/No case is a rather commonly required one, it was made possible using the trick with the string. – Marian May 27 '10 at 20:47
0

Pointy is right about browser close events - imagine if evil sites could prevent you from closing their windows?? So you cannot prevent them from closing your site, but you can do an alert.

As far as your logout button is concerned, that is much more straight-forward:

<a href="logout.html" onClick="return confirm('Did you remember to download your form?');">Logout</a>
Ryley
  • 21,046
  • 2
  • 67
  • 81
  • I **thought** I was right, but it turns out that both Firefox and IE will honor the "beforeunload" convention even when the browser window is being closed. The user does have a choice to let it close, however. – Pointy May 27 '10 at 17:22