How to add additional window.onload event in Javascript

Question

In my asp.net user control, I add a few script to the window.onload event, for example:

if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), onloadScriptName)) Page.ClientScript.RegisterStartupScript(this.GetType(), onloadScriptName, "window.onload = function() {myFunction();};", true); 

My problem: if there is already something in the onload event, this overwrites. How can I let two user controls execute javascript in the onload event?

** Edit: ** Thanks for the information on third-party libraries. I will remember them.

Answer 1

Most of the solutions offered are specific to Microsoft or require bloated libraries. Here is one good way. This works with W3C-compatible browsers and with Microsoft IE.

 if (window.addEventListener) // W3C standard { window.addEventListener('load', myFunction, false); // NB **not** 'onload' } else if (window.attachEvent) // Microsoft { window.attachEvent('onload', myFunction); } 

Answer 2

There is still an ugly solution (which is much worse than using a framework or addEventListener / attachEvent ), which should save the current onload :

 function addOnLoad(fn) { var old = window.onload; window.onload = function() { old(); fn(); }; } addOnLoad(function() { // your code here }); addOnLoad(function() { // your code here }); addOnLoad(function() { // your code here }); 

Note that frameworks such as jQuery will provide a way to execute code when the DOM is ready, and not when the page loads.

A DOM that is ready means that your HTML is loaded, but not external components, such as images or style sheets, which allows you to call long before a load event occurs.

Answer 3

Mootools is another great JavaScript environment that is pretty easy to use, and like RedWolves, with jQuery you can just leave as many handlers as you want.

For every * .js file that I include, I just transfer the code to a function.

 window.addEvent('domready', function(){ alert('Just put all your code here'); }); 

And there are advantages to using domready instead of onload

Answer 4

I had a similar problem today, so I decided to have index.js with the following:

 window.onloadFuncs = []; window.onload = function() { for(var i in this.onloadFuncs) { this.onloadFuncs[i](); } } 

and in the additional js files that I want to attach to the onload event, I just have to do this:

 window.onloadFuncs.push(function(){ // code here }); 

I usually use jQuery, but this time I was limited to pure js, which were forced to use my mind for a while!

Answer 5

Do you consider using something like jQuery that provides a framework for clearing multiple event handlers?

Answer 6

Try the following:

 window.attachEvent("onload", myOtherFunctionToCall); function myOtherFunctionToCall() { // do something } 

edit: hey, I was just about to enter Firefox and reformat it myself! It still doesn't seem to me that it formats the code for IE7.

Answer 7

I don’t know much about ASP.NET, but why not write a custom function for the onload event, which in turn calls both functions for you? If you have two functions, call them as from the third script that you register for the event.

Answer 8

Actually, according to this MSDN page , it looks like you can call this function multiple times to register multiple scripts. You just need to use different keys (second argument).

 Page.ClientScript.RegisterStartupScript( this.GetType(), key1, function1, true); Page.ClientScript.RegisterStartupScript( this.GetType(), key2, function2, true); 

I believe this should work.

Answer 9

I know this was answered, but I just want you to know about this function:

http://phrogz.net/JS/AttachEvent_js.txt

refers to T

Answer 10

You can do it with jquery

 $(window).load(function () { // jQuery functions to initialize after the page has loaded. });