javascript - 如何设置更多 window.onload 事件？

Question

加载页面时，我想调用三个函数。我试过这个：

window.onload = [function f1(){...}, function f2(){...}, function f3(){...}];

不幸的是，这不起作用。我不知道我应该如何管理它。

Answer 1

您不能设置多个事件处理程序，它不受支持。如果你需要执行多个函数，那么你只需要一个接一个地依次调用它们：

function f1() { ... }
function f2() { ... }
function f3() { ... }

window.onload = function() {
    f1();
    f2();
    f3();
}

大多数 javascript 库都为您提供了向事件处理程序添加多个函数调用的方法 - 并将为您执行链接。例如，使用 jQuery，您可以这样做：

$(window).load(function() { ... });
$(window).load(function() { ... });
$(window).load(function() { ... });

这不会用新的调用覆盖先前的调用，但会将所有三个设置为从onload事件中调用。

更新：处理它的另一种方法是addEventListener在您的window对象上使用。

function f1() { ... }
function f2() { ... }
function f3() { ... }

window.addEventListener("load", f1);
window.addEventListener("load", f2);
window.addEventListener("load", f3);

甚至

window.addEventListener("load", function() { ... });
window.addEventListener("load", function() { ... });
window.addEventListener("load", function() { ... });

这两个代码片段等同于第一个 - 并且彼此相同。

Answer 2

在混淆代码的类别下，这里有一个选项被认为是大脑锻炼：

window.onload = function() {
  return this.forEach(Function.prototype.call, Function.prototype.call);
}.bind([function f1(){...}, function f2(){...}, function f3(){...}]);

它适用于实现Array.forEach()和Function.prototype.bind().

Answer 3

只需将所有函数包装在一个匿名函数中

window.onload = function(){
  f1();
  f2();
  f3();
}

Answer 4

您可以在从一个函数调用函数之前定义函数：

window.onload = function () {
    f1();
    f2();
    f3();
}

addEventListener()您可以onload为. 侦听器按定义的顺序执行。

Answer 5

使用函数动态添加它们：

function addWindowOnload(next) {
    var prev = window.onload; 
    window.onload = function() {
        if (prev) prev();
        next();
    };
}