使用 window.onload 超过 1 次答案

【问题标题】：Using window.onload more than 1 times使用 window.onload 超过 1 次
【发布时间】：2012-08-31 10:09:09
【问题描述】：

如果我写这个

$(document).ready( function () { 
    alert("bla1");
});


$(document).ready( function () { 
    alert("bla2");
});

一切都好，出现两个警报，但如果代码是

window.onload = function () {
    alert("bla1");
}


window.onload = function () {
    alert("bla2");
}

第二个警报没有发生，请告诉某人，为什么 2 个或更多 window.onload 是错误的？

【问题讨论】：

第二个声明覆盖了第一个，所以你只能将一个函数声明为window.onload，然后在那个window.onload中调用你需要的任何函数

标签： javascript jquery

【解决方案1】：

你给它分配了一些东西。然后，您为其分配其他内容并覆盖之前的内容。

foo = 1;
foo = 2;
// foo is now "2" it is not "1" and "2"

如果您想以非破坏性方式分配事件处理程序，请使用addEventListener。您将需要使用兼容性方法来支持 Old-IE。这些方法通过on method 内置到jQuery 中。

【讨论】：

【解决方案2】：

好像

 var test;
 test = 10;
 test = 20 
 alert(test); // 20

你覆盖它和 jQuery 以不同的方式处理 load 事件。

【讨论】：

【解决方案3】：

如果你想实现你想要的行为，你必须使用函数 addEventListener。

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

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

【讨论】：

【解决方案4】：

试试这样的

function doOnLoad() {
        alert("hi");
        alert("bye");
}
window.onload = doOnLoad;

【讨论】：

【解决方案5】：

Robert Hahn 在他的blog 上有一个很好的解决方案。

function makeDoubleDelegate(function1, function2) {
    return function() {
        if (function1)
            function1();
        if (function2)
            function2();
    }
}

window.onload = makeDoubleDelegate(window.onload, myNewFunction );

makeDoubleDelegate() 函数会放在第一个 JS 文件中，随时可以调用。它的作用是接受两个功能参数，检查它们是否存在，如果存在，则返回匿名包含有效的现有函数的函数。

第一次调用 window.onload 时，window.onload 本身是未定义，所以返回的是一个匿名函数，只有 myNewFunction() 里面。在随后的 window.onload 分配中， window.onload 确实存在，所以无论它持有什么都将被包裹起来新功能。所以这个列表会增加。

【讨论】：

【解决方案6】：

我知道我的回答为时已晚，但您可以尝试以下方法：

function hello() {
    window.alert("hello");
}

function bye() {
    window.alert("bye");
}

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

【讨论】：