Click here to Skip to main content
Click here to Skip to main content

[JavaScript] 'window.onbeforeunload' fires twice.

, 12 Oct 2012
Rate this:
Please Sign up or sign in to vote.
An easy fix.

It is a common practice to handle the 'unsaved data on page' scenario by means of handling 'window.onbeforeunload' event. A typical way of handling this event would be like this.

window.onbeforeunload = handleUnsavedData;

function handleUnsavedData() 
{
  if (pageUpdated) 
  {
    return 'You have unsaved data on the page. Are you sure you want to    navigate away from the page?';
  }
}

This works, but you may have noticed that the 'onbeforeunload' event is getting fired twice, effectively executing the function 'handleUnsavedData' twice!

Well, there is a work around for this. The solution is to disable the event handler. So the code would look like below:

function handleUnsavedData() 
{ 
    if(pageUpdated) 
    { 
        event.returnValue = 'You have unsaved data on the page. ' + 
          'Are you sure you wan to navigate away from the page?'; 
        window.onbeforeunload = null; 
    } 
}

Now this makes sure that the event is not fired twice - only to introduce a new problem!

Imagine that you have chosen not to exit the page when you were warned. Now you are back in your page (without a post-back of course). If you try to navigate away from the page again, will it warn you? Of course not, because you have nullified the event handler. 

Luckily there is a work around for that too Smile | :)  

The idea is to temporarily disable the event handler and then enable it later (within a few milliseconds). The modified code would look like below.

function handleUnsavedData() 
{ 
    if(pageUpdated) 
    { 
        event.returnValue = 'You have unsaved data on the page. ' + 
          'Are you sure you wan to navigate away from the page?'; 
        window.onbeforeunload = null; 
        setTimeout("enableBeforeUnloadHandler()", "100"); 
    } 
} 

function enableBeforeUnloadHandler()  { window.onbeforeunload = confirmExit; }

In this case, the event handler would be reinstated shortly after returning to the page. You may want to play with the '100 ms' a little bit to suit your requirements.

Happy coding!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

James Poulose
Software Developer (Senior)
United States United States
No Biography provided

Comments and Discussions

 
SuggestionMay be a better approach PinprofessionalSojaner2-Feb-14 21:52 
SuggestionSome code suggestions PinmemberDaniel Lo Nigro16-Oct-12 13:22 
QuestionAnother idea... PinmemberSpiff Dog12-Oct-12 11:25 
AnswerRe: Another idea... PinmemberJames Poulose12-Oct-12 11:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140718.1 | Last Updated 12 Oct 2012
Article Copyright 2012 by James Poulose
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid