Unload Event

**bluewalrus** · 08-09-2010, 07:54 PM

Does anyone know how google/gmail gets the confirm window to come up before the window closes? I thought it was onunload but that's not working on my page, it closes then the confirm comes up. I want the user to know there changes will be lost if they close the window, this works for refreshes but not ctrl (command/apple) + W ( I assume clicking the X in the browser to but havent tried).

Code:

<body onUnload="javascript: confirm('You are leaving the page, all data changes will be lost. Are you sure?')">

Thanks for any ideas.

**djr33** · 08-09-2010, 07:59 PM

I believe it is this:

Code:

<body onUnload="return confirm('You are leaving the page, all data changes will be lost. Are you sure?');">

Note that for security reasons some browsers may block this... google may have some more tricks...

The difference is that what you have just tells the browser to ask a question. By adding 'return' this means that it triggers the event on true and skips on false-- so that is based on the response to the question.

By the way, I think that the "javascript:" prefix is unneeded in this case. When it's already a JS event like "on__", you don't need that; when it's something else, you may. For example on links since the href is not usually js, you use that. (But the better way, in my opinion at least, is to use onclick and a real href as a fallback.)

And as a completely unrelated issue, I was validating a page in XHTML strict and found that all attributes must be lowercase, so onunload instead of onUnload. I'm used to typing them with the capital letters, but apparently that's invalid. It depends on the doctype though, and I don't know what HTML5 will want...

**bluewalrus** · 08-10-2010, 01:31 AM

Oh, okay thanks, I thought JS commands case was insensitive. That code worked the same way unfortunately, or I changed it some how?

Code:

<body onunload="return confirm('You are leaving the page, all data changes will be lost. Are you sure?');">

**djr33** · 08-10-2010, 05:00 AM

JS commands are case-insensitive, but "onunload" is not JS-- it's HTML, a property of that tag. And it is case insensitive except in XHTML, I believe. XHTML is the first version of HTML to care about cases, from what I remember. I'm just mentioning this since I thought of it. It's probably irrelevant-- in practice, I believe it will still function, but you may get an error when validating the page as XHTML strict.

As for the same execution, I have no idea then. What you have there is correct. Have you tried it in a few browsers? I imagine it might just be a security issue, though clearly gmail and other services have found a way to get around this.

I don't know much about other methods, but I know that there are ways to set the "onunload" property directly in JS, not on the body tag. Perhaps this operates at a lower level.

EDIT: Aha. I just remembered something I haven't seen in a while. It's not onunload. It's onbeforeunload.
See this post for more info:
http://www.phpfreaks.com/forums/inde...topic=229192.0

(And that's all I know about the topic, but I believe it should be self explanatory from here, considering that should exactly address the problem you've been having.)

Note that security restrictions may (or may not) still be present.

**bluewalrus** · 08-10-2010, 11:37 PM

Yup it was onbeforeunload I had to call it a different way though, in FF it had a default msg as well so it was triggering twice.

This is my ending code, placed in the head:

Code:

<script type="text/javascript">
<!--
window.onbeforeunload = exiting_page;
function exiting_page(){
	msg = "You are leaving the page, all data changes will be lost.\n Are you sure?"
	return msg;
}
//-->
</script>

Thread: Unload Event

Thread Tools

Search Thread

Unload Event

The Following User Says Thank You to djr33 For This Useful Post:

The Following User Says Thank You to djr33 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions