1

How to call more than one javascript function on the window's onload event?

For Ex,

             window.onload=MyFunc(); //Single Function

But what if there are more than one functions to call on the window's onload event...

1
  • 1
    That's incorrect anyway, unless MyFunc returns a function object. Putting the parentheses after MyFunc means that you call it immediately and the value returned by MyFunc will be assigned to window.onload. I imagine you meant window.onload=MyFunc. Commented Nov 2, 2010 at 10:13

4 Answers 4

11

Wrap them.

window.onload = function() { MyFunc(); MyOtherFunc(); }
Sign up to request clarification or add additional context in comments.

Comments

4

Or you could bind the functions to the window's load event:

window.addEventListener("load", MyFunction, false);
window.addEventListener("load", MyOtherFunction, false);

For IE legacy you might need to use the attachEvent method:

window.attachEvent("load", MyFunction);
window.attachEvent("load", MyOtherFunction);

Problem with this approach is that the order in which the functions are executed can not be counted on.

1 Comment

This will of course need fallback attachEvent code on IE<9.
1

Here is a sample piece that would explain HOW:

// create an array that will contain all 
// your functions that you would like to 
// call on page load
var pageOnLoadEvents = [];

// Add one or more functions in pageOnLoadEvents array
pageOnLoadEvents.push(function() { alert("Hello!"); })
pageOnLoadEvents.push(function() { alert("How are you?"); })


// This will call when your page will load
window.onload = function() {
  // Loop through each index of pageOnLoadEvents
  for(var index = 0; index < pageOnLoadEvents.length; index++) {
   // '()' brackets in the end tell them to make a call
   // If you don't include '()' at the end this will
   // suspect as a object as in JavaScript functions 
   // are first-class objects.
   // document.write(pageOnLoadEvents[index].toString()); // treat as object
   pageOnLoadEvents[index]();
  }
}

The above sample tried to be made simple to give you explanation on your question. However, there is a good explanation on Simon Willison’s Weblog, he wrote:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* more code to run on page load */ 
});

The addLoadEvent function takes as an argument another function which should be executed once the page has loaded. Unlike assigning directly to window.onload, the function adds the event in such a way that any previously added onload functions will be executed first. Read more.

Comments

0

Why not have an old school way of having as many function calls inside one function invoked on page load? window.addEventListener("load", Foo, false);

where Foo has calls to all required functions. This way you can control the order and return values if required.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.