onUnload not working for me?

JavaScript
1

The code below is not working for me in Chrome or FireFox.

<body onUnload="alert('Dont Leave');">

What I expected the code to do is, create an alert box when I leave the page. onMouseOver and onClick are working fine for me and do create alerts.

Is there an error in the code?

Thanks!

2

It could be that because the page has already started unloading by the time that the onunload event is triggered that the page finishes unloading before the alert gets displayed. Usually you can get away with one statement in an onunload though.

3

Hi Fergal,

Try this instead:

<!DOCTYPE HTML>
  <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Before onunload</title>
  </head>
  
  <body>
    <h1>I'm a heading, yay!</h1>
    <script>
      window.onbeforeunload = function() {
        return "Your text here";
      };
    </script>
  </body>
</html>

HTH

P.S. +1 for adding “for me” to your question.

4

Just try to be aware that onbeforeunload is not supported by all web browser. Opera for example, will do nothing with it.

The following article has some wise words to say on the topic of when it’s appropriate to use, and on other alternatives too.
Don’t Let the Door Hit You Onunload and Onbeforeunload

5

Oh wow, you’re right.
I didn’t know that.
Thanks.

Out of interest, what would you suggest as a cross-browser way of informing the user that they are, for example, about to navigate away from a page and in so doing will lose their unsaved work.
Example where this might be useful: composing a message on SitePoint when you accidentally click on a link which takes you away from your current page.

It seems that SP is using the beforeonunload technique, as if you try to navigate away from an unposted message in Chrome, you get a pop up asking you if you really want to do this, whereas Opera will happily navigate you away from the page and your post is lost.

Or, am I approaching the problem from the wrong angle and should I be asking “What’s the best way to autosave a user’s work in case they navigate away from an unposted message”.

6

What I’d do is to save a draft on a times basis (every 1 minutes, for example) whether that be locally or via an ajax request, and use the onunload event to to fire off another save too. That way you can have an undo system, or step back to one of the previous drafts.[/quote]

Yes, that’s the better way to do things. An undo system is a better interface than a warning system.

7

Ah ok, that sounds good.
I’ve been doing a bit of reading and it seems that browsers are blocking alerts which fire onunload.
I’m guessing that a save would be unaffected.

@Fergal ;
Just out of interest, what are you trying to do?
Do you really want an alert box to pop up when the user attempts to leave the site, or are you trying to implement something else and this was just pseudo-code?

8

I am having the same problem with a site where users are entering critical data into a page using CKEditor.
They click on a Save button on the page to save the data, the same function being executed when the page is unloaded or the window is closed.

I am using “body onunload” which works fine in IE8, but doesn’t work at all in Firefox or Chrome.
None of the other solutions I have found seem to work for Firefox or Chrome and then don’t work for IE8 either.

The users are getting grouchy because they just moved from IE8 to Chrome for entering this data, and Chrome has a habit of updating itself and updating the page, which causes the report content to be lost.

Ideally I want to find an Unload trigger that works in IE8, Chrome and Firefox, but an alternative would be if I could save the data that they were typing every minute, a solution that I see mentioned here. Not sure how to go about that though. Could someone please point me in the right direction.

Thanks.

9

Since posting this I have investigated autosaves and there is an Autosave plugin for CKEditor which I am now looking at.
Hopefully this will resolve my problem, since I just can’t get any OnUnload functions to work on all browsers.

10

This is because the onunload event not supported properly (if at all) in Chrome or Opera.

I think the autosave plugin is the best way for you to go in this situation.

11

I thought the same too, then realized the Autosave only works with CKEditor4, which I tried to install months ago but which doesn’t work properly with iFrames.

Since it’s too hard to rewrite the site to not use iFrames (right now at least) I am back looking at onUnload.

I can get a popup to work when the window is closed in Chrome, but because I can’t add any logic to the function, the user is still prompted after pressing a button to save/close the page.

Seems no matter what I try it’s not working in all browers. Chrome is so good in many other ways, but this is ridiculous.

12

As stated before, it won’t really be possible to implement this in a cross-browser fashion, due primarily to support for onunload events varying between browsers.

I would therefore opt for the alternative solution of saving the content every minute or every thirty seconds.

To do this, use JS’s setInterval function:

setInterval(function(){
	console.log("I will be invoked every second indefinitely");
}, 1000);

To cancel setInterval assign it a variable and use clearInterval.

var i = setInterval(function(){
	console.log("I will be invoked every second indefinitely");
}, 1000);

...

clearInterval(i);

HTH