JavaScript 函数调用

Question

如何在窗口的onload事件上调用多个javascript函数？

例如，

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

但是如果在窗口的 onload 事件上调用多个函数怎么办？

Answer 1

把它们包起来。

window.onload = function() { MyFunc(); MyOtherFunc(); }

Answer 2

或者您可以将函数绑定到窗口的加载事件：

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

对于 IE 旧版本，您可能需要使用 AttachEvent 方法：

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

这种方法的问题是函数执行的顺序无法确定。

Answer 3

这是一个解释如何操作的示例：

// 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]();
  }
}

上面的示例试图变得简单，以便为您的问题提供解释。不过，Simon Willison 的博客上有一个很好的解释，他写道：

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

addLoadEvent 函数作为
参数另一个函数应该
页面加载后执行。
与直接赋值不同
window.onload，该函数添加了
事件以任何方式
之前添加的 onload 函数将
首先被执行。 了解更多。

Answer 4

为什么不采用一种老式的方式在页面加载时调用一个函数内尽可能多的函数调用？
window.addEventListener("加载", Foo, false);

其中 Foo 调用了所有必需的函数。
这样您就可以根据需要控制顺序和返回值。