Results 1 to 3 of 3
  1. #1
    Join Date
    May 2009
    Posts
    766

    window.onbeforeunload cross-browser functionality (jQuery)

    Hi all,

    So, I'm trying to negotiate overriding a window.onbeforeunload event.

    I've got a header page that includes some basic JS for the whole site, including this bit:

    Code:
    $(document).ready(function ()
    {
      $("#loading").hide("fast");
      $(window).bind('beforeunload', function () { $("#loading").show("fast"); });
    
      if (typeof pagestart == 'function') pagestart();
    });
    So, basically, <div id="loading"/> is a div that's also included in the header that has a nice little spinning graphic, and is z-indexed to make all other page elements unclickable before the page finishes loading. When you first click away from a page, I pop it up and once your destination finishes loading, it goes away. That part works great.

    pagestart() is just a method that I use on individual pages to initialize any handlers, etc. that are page-specific.

    So, now I've got a page that checks for changes in a form and needs to pop up a confirmation dialog if the user attempts to navigate away with unsaved changes. This means that the loading div will pop up, but if they click "Cancel," obviously, we need it to go away again. Alternatively, if we just overwrite the onbeforeunload event so that the loading div does not appear until the next page starts rendering, that would be fine as well.

    This does not work at all:

    Code:
    function pagestart()
    {
      $(window).unbind('beforeunload');
      $(window).bind('beforeunload', function ()
      {
        if (changed)
        {
          return "You have unsaved changes on this page.  Leaving the page\n" +
                 "will result in the loss of these changes.";
        }
      });
    }
    
    The onBeforeUnload event doesn't fire at all, for some reason. If I set it explicitly:

    Code:
    window.onbeforeunload = function ()
    {
      if (changed)
      {
        $("#loading").hide("fast");
        return "You have unsaved changes on this page.  Leaving the page\n" +
               "will result in the loss of these changes.";
      }
    }
    
    This works exactly as I'd expect in Firefox, however, in IE (7), the confirmation dialog is displayed and behaves as expected, but the "loading" div never goes away.

  2. #2
    Join Date
    May 2009
    Posts
    766

    window.onbeforeunload cross-browser functionality (jQuery) [SOLVED]

    Fix was:

    Code:
    $(window).unload(function() 
    {
      //...
    });
    
    jQuery seems to actually bind that to beforeunload...

  3. #3

    cross-browser?

    Quote Originally Posted by mattle View Post
    Fix was:

    Code:
    $(window).unload(function() 
    {
      //...
    });
    
    jQuery seems to actually bind that to beforeunload...
    How is that cross browser? Chrome doesn't seem to give a fig about it.

  4. Newsletters

    Subscribe Now & Get The WHT Quick Start Guide!

Similar Threads

  1. Site altered the size of my browser window!
    By grandad in forum Computers and Peripherals
    Replies: 5
    Last Post: 10-20-2006, 04:47 PM
  2. Push PDF to browser ranther than open in browser window
    By SimonT in forum Programming Discussion
    Replies: 2
    Last Post: 11-12-2005, 10:43 AM
  3. no white between image and browser window, how?
    By macfan in forum Web Design and Content
    Replies: 19
    Last Post: 06-21-2004, 01:11 PM
  4. Control Browser Window Size
    By djack89 in forum Programming Discussion
    Replies: 5
    Last Post: 11-29-2003, 03:52 AM
  5. controlling browser window on load
    By djack89 in forum Programming Discussion
    Replies: 2
    Last Post: 06-19-2003, 11:50 PM

Posting Permissions

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