CODEWITHSUNDEEP
javascriptasp.neteventslistener
Ray
Ray

Reputation: 46575

Add multiple window.onload events

In my ASP.NET User Control I'm adding some JavaScript to the window.onload event:

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

My problem is, if there is already something in the onload event, than this overwrites it. How would I go about allowing two user controls to each execute JavaScript in the onload event?

Edit: Thanks for the info on third party libraries. I'll keep them in mind.

Upvotes: 68

Views: 66816

Answers (8)

Fábio de Lima Souto
Fábio de Lima Souto

Reputation: 135

I had a similar problem today so I solved it having an index.js with the following:

window.onloadFuncs = [];

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

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

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

I normally use jQuery though, but this time I was restricted to pure js wich forced to use my mind for a while!

Upvotes: 7

Vincent Robert
Vincent Robert

Reputation: 36120

There still is an ugly solution (which is far inferior to using a framework or addEventListener/attachEvent) that is to save the current onload event:

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 like jQuery will provide a way to execute code when the DOM is ready and not when the page loads.

DOM being ready means that your HTML has loaded but not external components like images or stylesheets, allowing you to be called long before the load event fires.

Upvotes: 20

DadViegas
DadViegas

Reputation: 2291

You can do this with jquery 

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

Upvotes: 1

user83421
user83421

Reputation: 1185

Most of the "solutions" suggested are Microsoft-specific, or require bloated libraries. Here's one good way. This works with W3C-compliant 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);
}

Upvotes: 107

cole
cole

Reputation: 1021

Mootools is another great JavaScript framework which is fairly easy to use, and like RedWolves said with jQuery you can can just keep chucking as many handlers as you want.

For every *.js file I include I just wrap the code in a function.

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

And there are also advantages of using domready instead of onload

Upvotes: 3

Derek Park
Derek Park

Reputation: 46846

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 (the second argument).

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

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

I believe that should work.

Upvotes: 1

Chris Farmer
Chris Farmer

Reputation: 25386

Try this:

window.attachEvent("onload", myOtherFunctionToCall);

function myOtherFunctionToCall() {
    // do something
}

edit: hey, I was just getting ready to log in with Firefox and reformat this myself! Still doesn't seem to format code for me with IE7.

Upvotes: 2

Derek Park
Derek Park

Reputation: 46846

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

Upvotes: 1

Related Questions