Click here to Skip to main content
11,429,382 members (64,052 online)
Click here to Skip to main content
Technical Blog

[JavaScript] 'window.onbeforeunload' fires twice.

, 12 Oct 2012 CPOL
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)

Share

About the Author

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

Comments and Discussions

 
SuggestionMay be a better approach Pin
Sojaner2-Feb-14 22:52
professionalSojaner2-Feb-14 22:52 
SuggestionSome code suggestions Pin
Daniel Lo Nigro16-Oct-12 14:22
memberDaniel Lo Nigro16-Oct-12 14:22 
QuestionAnother idea... Pin
Spiff Dog12-Oct-12 12:25
memberSpiff Dog12-Oct-12 12:25 
AnswerRe: Another idea... Pin
James Poulose12-Oct-12 12:49
memberJames Poulose12-Oct-12 12: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 | Terms of Use | Mobile
Web03 | 2.8.150428.2 | Last Updated 12 Oct 2012
Article Copyright 2012 by James Poulose
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid