Javascript中的window.onload是否有+=？答案

【问题标题】：Is there += for window.onload in Javascript?Javascript中的window.onload是否有+=？
【发布时间】：2011-01-17 15:08:29
【问题描述】：

最近我想出了以下问题：

在我的网站的所有 html 页面中，我在正文 onLoad 事件中调用了一个函数：

<body onLoad="func1();">

这是我的 html 模板的一部分，所以它出现在我网站的每个页面上，我无法更改它。现在，交易是在某些页面上，我需要调用其他一些函数 onload 并且我尝试使用 window.onload 属性，但它会擦除 func1 的调用......

我现在只能说：

window.onload = func2(); //where func2() calls to func1()

但这看起来又脏又蹩脚？不是吗？

那么，有没有一种方法可以将一些函数添加到即将在加载时执行的函数中，而不删除旧函数？另外，如果有帮助的话，我会使用 asp.net ...

谢谢！

【问题讨论】：

我在答案中看到的是 jquery 可能是我们能得到的最好的。或者我们可以尝试一些肮脏的技巧和技巧。
我不认为“匿名函数”方法是“肮脏的把戏或黑客”。它实际上非常简洁......并且使用了 JavaScript 最强大的功能之一。
我同意，这也是一个不错的选择。

标签： asp.net javascript jquery onload anonymous-function

【解决方案1】：

您可以使用 jQuery 链接负载处理程序。反复使用jQuery.load 或jQuery(document).ready 将链接您的处理程序（我相信）。您的另一个选择是以编程方式进行，这意味着您需要一个辅助函数来为您链接您的 onload 处理程序。您可以使用闭包（或匿名函数）来做到这一点：

var addOnLoadHandler = function(newHandler) {

    if (typeof window.onload != 'function') {
        window.onload = newHandler;
    }

    else {
        var oldHandler = window.onload;
        window.onload = function() {
            if (oldHandler) {
                oldHandler();
            }
            newHandler();
        };
    }
};

你必须以编程方式绑定你的函数，所以你必须这样做：

addOnLoadHandlers(function() {
 alert("Hi I am the first onLoad handler!");
});

addOnLoadHandlers(function() {
 alert("Hi I am the second onLoad handler!");
});

在 javascript 文件中（或在您的 html 文件中）。

另一种方法是使用数组：

var onloaders = new Array();

function runOnLoads() {
    for (i = 0; i < onloaders.length; i++) {
        try {
            var handler = onloaders[i];
            handler();
        } catch(error) {
            alert(error.message);
        }
    }
}

function addLoader(obj) {
    onloaders[onloaders.length] = obj;
}

在您的 HTML 或 Javascript 文件中执行以下操作：

addLoader(function() {
 alert("Hi I am the first onLoad handler!");
});

addLoader(function() {
 alert("Hi I am the second onLoad handler!");
});

然后在你的 html 中你可以做 <body onload="runOnLoads()">

【讨论】：

【解决方案2】：

您可能希望充分利用匿名函数：

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

借自Top 10 custom JavaScript functions of all time。

【讨论】：

【解决方案3】：

jQuery 有一个很好的简写方式，可以将多个已定义的处理程序添加到“就绪”事件（不适用于必须使用 $(document).ready(function(){}); 的匿名函数）。

简单

$(myFunction);
$(myFunction2);

一个很大的优势是，如果 DOM 已经加载，它仍然会被触发，而在事件之后绑定到 window.onload 的任何东西都不会被调用。

【讨论】：

【解决方案4】：

您是否考虑过像 jquery 这样的 javascript 库，我知道还有其他方法，但 jquery 会让您的生活变得更轻松...

$(function(){
   //Do stuff when DOM is loaded.
   func1();
    $('#link').click(function(){
        //bind a click event
    });
});

经典方法是将所有功能粘贴在页面底部:)

【讨论】：

好的，但是我想在每个页面上调用一些函数，而有些函数只在某些特定页面上调用。当我说“在每一页上”时，我想把它写在一个地方。 jquery 将如何帮助我？
如果他不想使用jQuery怎么办？ @anthares，如果您希望仅在特定页面上调用某些函数，则需要在这些页面上添加 JavaScript，以添加您需要的特定 onload 处理程序。
@anthares，既然你说的是asp.net，你在使用母版页吗？如果是这样，但那里是一般的，如果不是，那么我想你需要在常见的函数周围包装一个函数并在每个页面中调用它。 JQuery 只是让一切变得更简单、更简洁。
@Paul hehe 可能有更优雅的方法:)
@vivin，确实如此，但是当有 jquery 之类的解决方案时，我不认为遍历代表数组是优雅的。

【解决方案5】：

在jquery中你可以这样做

$(document).onload(function() {
  // do something
}

//以后再做

$(document).onload(function() {
  // do something here too!
}

jQuery 会智能地将这两个事件添加到 onload 事件中，并在页面加载时执行。使用 jQuery，您还可以获得跨浏览器支持作为额外奖励。

【讨论】：