I’m working on something that, when the user comes to close the window, it checks that the form inputs are different to what they were when it was loaded, and if they are different - it will come up with a confirm box to say if the user really wants to close or not.
I’m using onbeforeunload=“on_beforeunload();” on the body tag… This seems ok in FireFox, but in IE 6 it runs the on_beforeunload() function twice? Can anyone tell me why, or is there a work around?
Many thanks,
James
Are there any child windows, iike iframes that are being used?
Hello mate… Yes, I’ve just checked… There is infact an iframe on this page… Does this effect things?
See, this is a real funny one… I’ve been investigated further into this problem I seem to be having and it seems to be a way that IE 6 works over FireFox (which runs this fine)… Please, run this code, check it out - on both FireFox and IE 6 (maybe 7 will work too? Not sure)…
<html>
<head>
<script type="text/javascript">
// A simple function that gets triggered by a link.
function clickHere()
{
alert("clickHere()");
}
// This runs once the page has loaded
window.onload = function ()
{
alert("window.onload");
}
// This should only run, just before a window is closing.
window.onbeforeunload = function ()
{
alert("window.onbeforeunload");
}
// This runs once the page has been unloaded
window.onunload = function ()
{
alert("window.onunload");
}
</script>
</head>
<body>
<!-- A link to run a simple function -->
<a href="javascript: clickHere();">Click Here</a>
<script type="text/javascript">
// Just show date/time to make sure the page is not refreshing.
var timeNow = new Date();
document.write(timeNow);
</script>
</body>
</html>
All I’ve done here is set up a simple test that runs an alert when the page first loads, when it’s just before the unload and the actual unload. Also, I have a function that alerts a mesage when a text link is clicked.
As you’ll see… FireFox does it all fine and runs them in correct order… But IE 6 does it differently… It seems to run the window.unbeforeunload when you click on the text link?? Why is this? Seems very odd…
The only way I can seem to get around it is by using this instead:
<a href="#" onclick="clickHere();">Click Here</a>
… where I’m not using the href=“” to call the function. Doing it this way round, seems to make everything run correctly in IE 6.
Back to my original problem on my company site (and hence me starting the thread in the first place) - you may just wonder why I can’t just set all my buttons in my company web site to have onclick=“function” instead of href=“javascript: function” - well… I could… But the way this system has been set up, I may not be able to do it…
Does anyone know why IE does this, this way? Is there any way around it with out altering much code? Has anyone else ever experienced this problem?
Hope you can help!
Anyone help with this one?
It’s happening because you’re using the javascript pseudo-protocol. IE6 is getting ready to go to another location, does the beforeunload, realises it’s the javascript pseuo-protocol and carries on.
Quirksmode has a good section about handling events
http://www.quirksmode.org/js/events_early.html
Horrible
<a href="javascript: clickHere();">Click Here</a>
Bad
<a href="#" onclick="clickHere();">Click Here</a>
Good
<a id="dosomething.php" href="dosomething.php">Click Here</a>
function clickHere() {
// do something
// cancel click event
return false;
}
document.getElementById('dosomething').onclick = clickHere;
This is the problem… I would LOOOVE to do it properly… Nice and abstract from the XHTML - but it doesn’t seem to be an option right now. It’s because even the buttons for the pages in this particular system are made inside a function that was made a few years back. If I change this function, it will effect all the other pages in the system…
I suppose there really is no way around this IE problem, with the a href=“javascript: function();” in place - correct? The onbeforeunload will always run when a javascript function call is called from within the href=“” right?
ANY other solution at all? Pretty desparate!
Thank you for your comments… Looks like I’ll have to adjust these base functions to get it working correctly…
Thanks for your help.
IE6 is buggy and runs onbeforeunload with any “javascript:…” code.
The best option may be to set a global variable when the function is run, then check from onbeforeunload() if the variable has been set.
// A simple function that gets triggered by a link.
function clickHere()
{
alert("clickHere()");
window.clickHereDone = true;
}
// This runs once the page has loaded
window.onload = function ()
{
alert("window.onload");
}
// This should only run, just before a window is closing.
window.onbeforeunload = function ()
{
if (window.clickHereDone == true) {
alert("window.onbeforeunload");
}
}
// This runs once the page has been unloaded
window.onunload = function ()
{
alert("window.onunload");
}
Thanks for that… That has helped… But could you help me further?
Basically, this system I’m having to add my code too… There is a form with loads of inputs on it. I’ve made a function that adds all those form inputs to an array, when the page loads. Then, how I wanted it, is on the onbeforeunload event, have it capture all the form inputs again and compare them. If they’re different from when the page first loaded, then there is unsaved changes. I wanted it so if a person using the system accidentally hits refresh, the close button or closes the window itself - it will alert them and confirm if they really want to leave with unsaved data on the page.
The system I’m coding for does all of it’s buttons by a button command that spurts out <a href=“javascript: <button function>”> … and this is where I’m having the problem of getting this whole unbeforeunload thing to work. Works great in Firefox, but it doesn’t in IE 6. I’ve tried using <a href=“#” onclick=“<button function>”> and I’ve tried spurting out <input type=“button” onclick=“<button function>”> but these cause problems with alot of the code already in the system, as they rely on setting .href of links to work some things…
Incredibly annoying, why does IE do this? My only option seems to be staying with what’s already in place… these <a href=“javascript: <button function>”> buttons - so I could do with some workaround that satisfys all this…
…A real toughy for me this… Can anybody help me further? Please?
The code from my previous post works with href=“javascript:function()”
You don’t need to save an array of form values. Each of the form elements has a defaultValue property contains their starting value, and the form element has an elements array that contains all of the form elements, so you can use the following code to check for any changes.
var el = document.getElementById('myForm');
var i, formElement, dirtyFlag = false;
for (i = 0; i < el.elements.length; i++) {
formElement = el.elements[i];
if (formElement.defaultValue !== formElement.value) {
dirtyFlag = true;
}
}
if (dirtyFlag) {
// call areYouSure function
}
Unfortunately IE considers most of the obvious things wrong. To this issue, I have found a work around, though doesn’t look goods but is able to fool IE.
#noAnchor refers to a bookmarked section which is not defined in the page. Using only # in href like href=“#” will make the page scroll to the top and most of us would not like to have that effect in long pages from usability prospective.
Thanks,
Biswa Dutta Jena