window.onload VS <body onload=...

yar1 · 01-29-2007, 12:33 PM

If I have multipile scripts (in external js files) that end with a window.onload=[do someting], should all window.onload stuff work or just the one in the last js ?

What would be a smart way to "accumulate" window.onload events that come from different scripts (in seperate js files) ?

More information:
1) I understand that in principle it is good to seperate structure from action and therfore "window.onload" is better than "BODY onload="

2) I use Dreamweaver and use some of its built in "behaviours" which add function calls to the "BODY onLoad=". I also use other scripts that are stored in external js files and these scripts end with window.onload calls.

3) I know that "BODY onload=" and "window.onload" don't both work on the same page.

Thx

tpeck · 01-29-2007, 02:07 PM

From the little I understand about it, you have to combine all those window onloads into a body onload.

<body onload="one();two();three();">

The alternative is to do much the same thing with the window.onload:

window.onload = function () {
one();two();three();
}

But here you can see that all the calls have to be within the same external js file, which means putting them all together like stringy plasticine. Could be messy.

So, I figure the body onload way is the best because the external js files can be left alone (except for omitting the window onload calls).

Hope that helps, but is probably short of a complete answer.

yar1 · 01-29-2007, 05:12 PM

Thx tpeck. I am looking for a more "automated" way I could use regularly. Your option means that I have to take care of each page manually.

What I am hoping for is a way to add a line to each script that needs to initiate something "onload" and then make one "window.onload" call. The logic should be something like
"window.onload = window.onload + newFunction()" but I don't know what the syntex needs to be...

vwphillips · 01-29-2007, 06:35 PM

Quote:

window.onload = function () {
one();two();three();
}

the calls in tpecks example CAN be in different external JS files.

Once the files are loaded they can all be considered as part of the page.

As you recognise the current thinking is that a widow on load is best because
as you say

Quote:

good to seperate structure from action and the

However most of the widow onload event are constructed as tpecks example which can catch out inexpertienced codes using cut and past scripts as an onload in one script overwrites an onload in another.

In summery its down to your priorities, conformance to 'standards' or 'keep it simple keep it safe' approach. I use either dependent on the application.

yar1 · 01-30-2007, 11:44 AM

None of the above really answered my need. I did find a solution that is reusable and decent but it would take long to explain... Feel free to PM me if you would like the details and I'll post them here.

tpeck · 01-30-2007, 12:04 PM

I'm not surprised, since in my experience, a global solution doesn't always suffice. I've seen ways to try to offer an easy way out but they have always failed me. It depends on what you are doing.

I reckon we should always try first to do it by body.onload. If that doesn't work, try the window.onload suggestions given in this thread.

If that doesn't work, try a global solution but don't expect it to always work.

There are really crazy things going on in this area (of course, there is a good reason for everything). For instance, ...

Why does this work?

Code:

<body onload="hm();mySoundObj1.TGotoAndPlay('/clk1','start');" onunload="sm();" background="../img/bg/bgggreylines.gif">
<div id="watermarklogo" style="position:absolute;"></div>
<script language="javascript">
<!--
var logowidth=85
var logoheight=18
var logoimage=new Image(logowidth,logoheight)
logoimage.src="../img/next2.gif"
var alttext="Click Here"
var visibleduration=0
var Hoffset=11
var Voffset=39

var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1

var watermark_obj=ie? document.all.watermarklogo : document.getElementById? document.getElementById("watermarklogo") : document.watermarklogo

function insertimage(){
if (ie||document.getElementById)
watermark_obj.innerHTML='<a href="test2n.html" target="_self"><img src="'+logoimage.src+'" width="'+logowidth+'" height="'+logoheight+'" border=0 alt="'+alttext+'"></a><br><a href="test2l.html" target="_self"><img src="../img/prev2.gif" width="85" height="18" alt="Click Here" title="Click Here" border="0" align="middle"></a>';
else if (document.layers){
watermark_obj.document.write('<a href="test2n.html" target="_self"><img src="'+logoimage.src+'" width="'+logowidth+'" height="'+logoheight+'" border=0 alt="'+alttext+'"></a><br><a href="test2l.html" target="_self"><img src="../img/prev2.gif" width="85" height="18" alt="Click Here" title="Click Here" border="0" align="middle"></a>');
watermark_obj.document.close();
}
}

function positionit(){
var dsocleft=ie? document.body.scrollLeft : pageXOffset
var dsoctop=ie? document.body.scrollTop : pageYOffset
var window_width=ie? document.body.clientWidth : window.innerWidth-20
var window_height=ie? document.body.clientHeight : window.innerHeight

if (ie||document.getElementById){
watermark_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-logowidth-Hoffset
watermark_obj.style.top=parseInt(dsoctop)+parseInt(window_height)-logoheight-Voffset
}
else if (document.layers){
watermark_obj.left=dsocleft+window_width-Hoffset-logowidth
watermark_obj.top=dsoctop+window_height-logoheight-Voffset
}
}

function hidewatermark(){
if (document.layers)
watermark_obj.visibility="hide"
else
watermark_obj.style.visibility="hidden"
clearInterval(watermarkinterval)
}

function beingwatermark(){
watermarkinterval=setInterval("positionit()",50)
insertimage()
if (visibleduration!=0)
setTimeout("hidewatermark()",visibleduration*1000)
}

if (ie||document.getElementById||document.layers)
window.onload=beingwatermark(); // don't know why this onload works - it shouldn't, but it produces the images required 
//  End -->
</script>
    <div align="center">

Forget what it does, and don't try to answer it (I value your time!), but it is the only way I can get all these onloads (three of them) working. But everyone believes a body onload always prevents a windows.onload from happening. Big BS obviously.

Nothing I have read anywhere really explains it - but, of course, an explanation is out there somewhere.

Anyhow, if you can be bothered, love to see your solution!

Bill Posters · 01-30-2007, 12:11 PM

One possible solution might involve namespacing the window.onload method.
This would enable you to add window.onload type events in multiple js files without risk of conflict.

As the very first piece of code in your first js file...

Code:

var libJS = {

	addEvent: function(obj,type,fn) {

		if (obj.addEventListener) {
			obj.addEventListener(type,fn,false);
			return true;
		} else if (obj.attachEvent) {
			obj['e'+type+fn] = fn;
			obj[type+fn] = function() { obj['e'+type+fn](window.event);}
			var r = obj.attachEvent('on'+type, obj[type+fn]);
			return r;
		} else {
			obj['on'+type] = fn;
			return true;
		}

		}

}

Once that's in, you can add window.onload events in other js files as follows.

e.g.

Code:

libJS.addEvent(window,'load',func1);

libJS.addEvent(window,'load',func2('blah'));

tpeck · 01-30-2007, 12:15 PM

My goodness! I never fail to be impressed!

Thanks!