By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,963 Members | 1,784 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,963 IT Pros & Developers. It's quick & easy.

onload handler order of firing

P: n/a
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

Jan 23 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Adam Ratcliffe wrote:
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?


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.
--
Rob
Jan 23 '06 #2

P: n/a
On 2006-01-23, Adam Ratcliffe <ad************@gmail.com> wrote:
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?


no. not even a guarantee that both will fire.

--

Bye.
Jasen
Jan 23 '06 #3

P: n/a
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

Jan 24 '06 #4

P: n/a
VK

Adam Ratcliffe wrote:
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?


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.

Jan 24 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.