Question

I’ve posted this here, but thought it might deserve a question on its own.

What I’m trying to do is show a dialog box that asks the user if he/she wants to leave the page if there are unsaved changes. That all works fine. But the problem is described below:

Has anyone come across the problem where Internet Explorer fires the onbeforeunload event twice? While Googling around, I found it has something to do with the fact that for (among others) an ASP.NET linkbutton the HTML code is <a href='javascript: __doPostBack....

Apparently, when IE encouters a link that doesn’t have a href='#', it fires the onbeforeunload event. Then, when you confirm the javascript dialog box we’re showing, the page will do the ‘real’ unload to navigate to the other page, and raise the onbeforeunload event a second time.

A solution offered on the internet is to set a boolean variable and check on it before showing the dialog. So the second time, it wouldn’t be shown. That’s all well, but when the user cancels, the variable will still be set. So the next time the user wants to leave the page, the dialog won’t be shown anymore.

Hope this is a little clear, and I hope someone has found a way around this?

Answer 1

In reaction to annakata: Yes, but you want the result of the dialog box to be used by the browser. So you might think using ‘return bFlag’ would do the trick (or event.returnValue = bFlag), but that gives you a second dialog box. I’ve found a way around, thanks to this page. It’s quite simple actually:

var onBeforeUnloadFired = false; 

Use this global variable here:

if (!onBeforeUnloadFired) {     onBeforeUnloadFired = true;     event.returnValue = 'You'll lose changes!'; } window.setTimeout('ResetOnBeforeUnloadFired()', 1000); 

And then implement that function:

function ResetOnBeforeUnloadFired() {     onBeforeUnloadFired = false; } 

So, in effect, use the flag, but reset it if the user clicks cancel. Not entirely what I would like, but haven’t found anything better.