onload handler order of firing

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Adam Ratcliffe - 23 Jan 2006 05:26 GMT

I have 2 onload handlers on a web page. One is set programatically in
an included script and the other declared on the document's body
element.

In practice the programatically set onload handler always fires first
in Firefox (the desired behaviour).

Do I have any guarantee that this ordering will be the same across
other browsers?

Cheers
Adam

Reply to this Message

RobG - 23 Jan 2006 06:46 GMT

> I have 2 onload handlers on a web page. One is set programatically in
> an included script and the other declared on the document's body
[quoted text clipped - 5 lines]
> Do I have any guarantee that this ordering will be the same across
> other browsers?

That seems a rather risky dependency, even if it is 'works' in practice,
that is easily proved to fail in at least one case (see below).

If the script element is in the header, the browser should parse the
content before getting to the body tag (the defer attribute can suggest
that it doesn't, but I'll guess you're not using that). But I'm not
sure that the onload events will be attached in the sequence you require
with any certainty.

A much safer method would be to have your own init() function that you
can add functions to so that you can guarantee that they run in the
right order.

Consider the following simple example:

<head>
<title>onload test</title>
<script type="text/javascript">

function hiScript() {
alert('hi, script 1');
}

if (window.addEventListener) {
window.addEventListener("load", hiScript, false);
} else {
window.attachEvent('load',hiScript);
}

</script>

</head>
<body onload="alert('hi, body');">
</body>

The alerts appear in the right order in Firefox (script then body), but
in IE I get only the onload attached in the body tag.

Signature

Rob

Reply to this Message

Adam Ratcliffe - 24 Jan 2006 20:45 GMT

Hi Rob

Your quite correct about there being no guarantee of the order in which
the event handlers will be called. Yesterday I had the opportunity to
test on a windows machine and the body element's onload handler was
called first (the opposite to FF).

The reason that the onload handler defined in the script tag wasn't
invoked in your example was because attachEvent() requires that the
event type is prefixed with 'on'.

Cheers
Adam

Reply to this Message

Jasen Betts - 23 Jan 2006 11:14 GMT

no. not even a guarantee that both will fire.

Signature

Bye.
Jasen

Reply to this Message

VK - 24 Jan 2006 21:05 GMT

There were some test made in this group a couple of month ago. It was
shown that addEventListener sequence is preserved, but attachEvent is
randomized (MSDN actually clearly states that). Also these test have
been made for addEventListener/attachEvent only (w/o intrinsic
handlers) and for Firefox / IE only. So on the global run no - the
sequence is not guaranteed. As suggested, if the sequence is crucial
for your case, you have to keep your own pool manually.
...
function init() {
for (var i=0; i<init.stack.length; i++) {
var foo = init.stack[i]();
}
} init.stack = new Array();
...
if (window.onload != null) {
init.stack.push(window.onload);
}
window.onload = init;
init.stack.push(extraFunction1);
init.stack.push(extraFunction2);
... etc.

Reply to this Message

one man army - 31 Jan 2006 20:54 GMT

What else can I use besides onload() that will be called when I enter a
page? If there is one, is the order betweenthe two _types_ of events
prescribed?

reason- I am having a problem with a third party API in which it gets
confused when I init it in doc.onload(), then make a bunch of calls
before it gets a chance to draw the first time. I want to split the code
to let it init, then make the calls, but all on upon entering the page.

btw, I am assigning the event handlers in the simplest possible
manner, in the HTML code itself. So no fancy dynamic event handling
additions here. They call modestly complex functions in an included .js
file.

thanks for pointers, I am on a deadline

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / January 2006

onload handler order of firing