SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist Fergal's Avatar
    Join Date
    Nov 2003
    Location
    Ireland
    Posts
    500
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    onUnload not working for me?

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

    Code:
    <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!
    Fergal Crawley (Previous Username: Proudirish.com)
    Business Advice Forum - Webmaster and Business Forum
    < Get a free link & win $5,000
    Forum Coin New World Currency

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,836
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi Fergal,

    Try this instead:

    HTML Code:
    <!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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    Try this instead:
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Just try to be aware that onbeforeunload is not supported by all web browser. Opera for example, will do nothing with it.
    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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.
    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]

    Quote Originally Posted by Pullo View Post
    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".
    Yes, that's the better way to do things. An undo system is a better interface than a warning system.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.
    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. #8
    SitePoint Member poddys's Avatar
    Join Date
    Apr 2012
    Location
    Southampton
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Member poddys's Avatar
    Join Date
    Apr 2012
    Location
    Southampton
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by poddys View Post
    I just can't get any OnUnload functions to work on all browsers.
    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. #11
    SitePoint Member poddys's Avatar
    Join Date
    Apr 2012
    Location
    Southampton
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    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.
    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. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by poddys View Post
    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.
    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:

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

    To cancel setInterval assign it a variable and use clearInterval.

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

    HTH


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •