How do I add an additional window.onload event in Javascript

Question

In my asp.net User Control I'm adding some script to the window.onload event like so:

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.

Answer 1

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.

Answer 2

@Derek Park: I think I'm going to have to do that. My problem was that each of the two user controls don't know about each other. But their parent knows about them both, so I can make the parent add the function to the page.

@Derek Park #2: The problem is the second time I call it, it adds the javascript correctly, but when the javascript executes the second one overwrites the first one that's added to window.onload.

Is there any particular reason why you need your scripts to execute during the onload event? i.e., Instead of registering:

"window.onload = function() {myFunction();};"

can't you just register:

"myfunction()"

as the startup script? It will still be executed when the page finishes loading.

Startup scripts don't seem to execute when the page is finished loading, but rather when that part of the page is rendered. This caused me problems when I want to look at the selected value of a control when the back button is pushed. See My Other Question.

@Chris Farmer: Perfect. Just what I was looking for.

Answer 3

if you use jQuery you can have multiple $(document).ready(function(){}); which is in essence a window.onload event.

Answer 4

@Ray, I think that's going to be the cleanest approach. But maybe someone else will know a way for you to directly register both events.

Answer 5

Have you considered using something like JQuery which provides a framework for cleaning adding multiple event handlers?

Answer 6

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.

Answer 7

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.

Answer 8

@Ray

@Derek Park #2: The problem is the second time I call it, it adds the javascript correctly, but when the javascript executes the second one overwrites the first one that's added to window.onload.

Is there any particular reason why you need your scripts to execute during the onload event? i.e., Instead of registering:

"window.onload = function() {myFunction();};"

can't you just register:

"myfunction()"

as the startup script? It will still be executed when the page finishes loading.

Answer 9

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

Answer 10

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.

Answer 11

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

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

regards T

Answer 12

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);
}