What's wrong with window.onload?

( I found some info. on this in an old thread, but still don’t understand it.) I recently came across this, in lynda.com… I think the idea is to do this as a way to do multiple functions that, you could do in the window.onload, but doing it this way is supposed to be better than doing it in window.onload. First, I don’t understand what’s wrong with just doing the 3 functions in window.onload?

Thanks!

addOnLoad(initOne);
addOnLoad(initTwo);
addOnLoad(initThree);

function addOnLoad(newFunction){
var oldOnLoad = window.onload;

if(typeof oldOnLoad == "function"){
	window.onload = function(){
		if(oldOnLoad){
			oldOnLoad();
		}
		newFunction();
	}
}
else{
	window.onload = newFunction;
}

}

The reason it is done this way is because you can’t simply put 3 methods inside of window.onload itself. So what is commonly done is calling multiple functions from within an anonymous function that is assigned to window.onload, like so:


window.onload = function() {
  doThis();
  doThat();
  doSomethingElse();
}

Of course this is assuming you would only want put this definition in once, if you wanted to abstract things out a little and make this more extendible you would use something like the addOnLoad function you posted.

This allows you to add as many functions to the window.onload event as you want from different places in your script.

well, I almost didn’t get your reply…I thought that I could do a window.unload the way you had it coded, and couldn’t see why the “lynda.com” way was better. Then I read your response – “it allows me to abstract things out a bit and make things more extendible” – THAT helped a LOT! :smiley: But, then I read your next paragraph, and that started clearing it up – at least it clears up the reason for why you want to do this; But, I still don’t understand the code, so let me see…

those first 3 lines…
addonload(InitOne)
addonload(InitTwo)
addonload(initThree)

are calling a function, addonload, passing variables (initOne, two & three),
which have not yet been declared, is that part right?

The reason for coding the window.onload that way is that the script then does not need to know what other scripts are attaching something to onload as well. The same code works whether there is one script using it to attach a function to onload or ten scripts all using it to each attach their own function.

The alternative means writing code that knows about all the scripts in the page and which needs changing whenever you add or remove a script.

It is - but you have to take that within the concept of the example :slight_smile:

Let’s say that you have the addOnload function defined already, now you could do something like:

function doSomething() {
  //do something here
  alert("doSomething");
}
addOnload(doSomething);

// somewhere else in the code:

function doSomethingElse() {
  //do something different here
  alert("doSomethingElse");
}
addOnload(doSomethingElse);

So, you’re right that those functions need to be defined somewhere, the following would also work:

addOnload(doSomethingElseAgain);

function doSomethingElseAgain() {
  //doing something else again
  alert("doSomethingElseAgain");
}

guys, forgive me, but I’m a REAL novice…Why would there be multiple scripts to the same web page, all wanting to do different things when the window loads…Are you saying that it’s common that there may be different people writing scripts against the same page, and they don’t need to know about each other? Can you point me to a real world example of this, so I can get an idea of what’s going on?

It is most common with novices - they get a script to do A from one site, a script to do B from another site etc and then find that while one works on their web page, trying to add the second one stops it working. This particular code is the fix for those novices to use.

Experienced JavaScripters will just write all their scripts to start with in a way that will not interfere with one another since they actually know how all the code does what it does.

ok, thanks guys. It would seem to me that you would want to put everything that should happen when the window loads all in one place – but, that could be because I don’t know what I’m talking about yet! :slight_smile:
I plan to finish the lynda.com javascript tutorial and get what I can from it, realizing that there’ll be plenty I won’t get…Then I’ll try learning with a book – or maybe even an actual class!

Thanks a lot for your help guys!

Yes, you have to if you are using onload but then if the pieces also belong to four separate scripts only some of which will be on some of your pages then you also want to keep the separate scripts as separate as possible and that code is the more primitive of the two ways that you can keep the separate scripts as separate as possible.

The better but more complicated way is to use event listeners to attach the functionality where you are allowed to attach more than one thing to the same event without the new one automatically detaching the prior one.

I’m actually a little surprised that I haven’t seen a single mention of addEventListener or attachEvent yet.

Even for me, this was odd way of doing onload method. I’m sure 99.9999% of the developer use this to initialize the page that calls AJAX or doing some dom manipulation. Just wondering why would you sprinkle “addOnLoad” all over the code. Seems like a bad design and should be in centralize method called something like “init” method. Also, I’ve heard that window.onload acts differently based on which browser. Some activates this method when dom is ready, when html is loaded, or something like…I can’t remember… I just rely on jQuery or other javascript framework’s onload method which gurantees that it runs after HTML dom is loaded on all browsers. So, you may need to keep this in mind if you’re using window.onload.

btw, does this have something to do with something called “dojo”? I’m finding other references out there to addonload with “dojo”…

I mentioned it in the immediately preceding post.

It is used by newbies who are adding more than one script to their page. You wouldn’t use it if you were writing the scripts yourself.

The Dojo JavaScript library might provide that as a part of the library but it is not specific to any JavaScript library. Primarily it is a quick way for JavaScript newbies who need to attach more than one script to their page to avoid one of them overwriting the other’s onload function.

Anyone writing the code themselves would either add all the function calls into a single function attached to the onload event handler or would do it properly using eventlisteners/attachEvent.

Thanks Felgall,

I understand the purpose of this code now, (even if i still don’t quite get the details of the code – I need to revisit that) – and your response shed light on this new term “dojo” for me. I’ve been programming legacy apps in languages like cobol for 40 years – so, by your response, I take it javascript comes in different “flavors” – something like IBM Cobol vs Hewlett-Packard Cobol – and “dojo” would then be one of the different vsns of Javascript…

Again, I really do appreciate all your help

No - Dojo is just some code written in JavaScript that performs certain tasks - there are a number of other libraries written in JavaScript that perform similar tasks. It just saves the people who use the library from having to write JavaScript themselves to do those tasks as they can just call the code someone else wrote to do those parts.

It would be more along the lines of someone providing you with a few dozen Cobol procedures that perform standard processing that you can copy into each of your Cobol programs so as to not have to write the Cobol to perform any of those tasks yourself. It isn’t quite as straightforward with a procedural language like Cobol though as it is with an object based one like JavaScript as you don’t need statements such as COPY MY_REC REPLACING LS- BY WS-, -X BY -Y. when you want to make multiple copies of objects and can instead just use var obj1 = new myObject(); var obj2 = new myObject(); to create the two copies.

hmm…well, at the risk of getting away from the subject of this thread, is it not a monumental task trying to keep track of what’s in all these libraries?

And does this mean that the “addonload” that we’ve been talking about since the beginning of this thread, would NOT necessarily be the same as dojo’s “addonload”?

It can be, but good references are an enormous help, such as for example the jQuery documentation or the [url=“http://dojotoolkit.org/documentation”]dojo documentation

There is a free School of Webcraft course starting up shortly, which will include course on JavaScript. That might be worth a look at.

Thanks PMW,

I took a quick look at that dojo site. So I see (at least in theory – no practical experience yet) how useful this can be. But, I’m getting WAY ahead of myself now…gotta get back to the beginners lessons now. btw, I see a course here on sitepoint that looks like something i’d like to take – I really liked the sales presentation. But, it’s live, that’s what I really like about it – except I probably wouldn’t be able to fit it in since I’d probably be working during class time. Oh well!

will do…I’d love to take that sitepoint live course, but, as I said, my work schedule will most likely be in the way of any live courses. But I’ll check out the Webcraft one. Thanks!