logo标签列表

Javascript中window.onload有+=吗？

asp.netjavascriptjqueryonloadanonymous-function
9

最近我遇到了以下问题：

在我的网站中，所有的HTML页面都在body onLoad事件中调用一个函数：

<body onLoad="func1();">

这是我的html模板的一部分，因此它出现在我的网站的每个页面上，我无法更改它。现在的问题是，在某些页面上，我需要在页面加载时调用一些其他函数，并且我已经尝试使用window.onload属性，但它会覆盖对func1的调用...

我知道我可以这样说：

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

但这似乎很糟糕和无聊？是吗？

那么，有没有一种方法可以在不删除旧函数的情况下添加一些要在加载时执行的函数？此外，如果可以的话，我使用asp.net...

谢谢！

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

你可以使用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()">

5
你可能希望充分利用匿名函数：
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

这段文字来源于 有史以来前10个最常用的自定义JavaScript函数。

5
jQuery有一个很好的简写方式来向"ready"事件添加多个已定义的处理程序（无法与匿名函数一起使用，必须使用$(document).ready(function(){});）。
简单明了。
$(myFunction);
$(myFunction2);

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

3

你是否考虑过使用像jQuery这样的JavaScript库？我知道还有其他方法，但是jQuery可以让你的生活变得更加轻松...

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

经典的方法是将所有函数都放在页面底部 :)
好的，但是我想要一些函数在每个页面上被调用，而有些函数只在特定的页面上被调用。当我说“在每个”页面上时，我希望将其写在一个单独的地方。jQuery如何帮助我？ - anthares
如果他不想使用jQuery怎么办？@anthares，如果你希望某些函数仅在特定页面上调用，你需要在这些页面上添加JavaScript来添加所需的onload处理程序。 - Vivin Paliath
@anthares，既然你说用的是asp.net，那么你是否在使用masterpage呢？如果是的话，可以将通用的部分放在其中；如果不是，那么我猜你需要将这些通用的部分封装成一个函数，并在每个页面中调用它。JQuery可以让所有事情变得更加简单和简洁。 - Paul Creasey
2
@Paul 嘿嘿，可能还有更优雅的方法 :) - Vivin Paliath
@vivin，确实，但是当有像jQuery这样的解决方案时，我不认为迭代委托数组是优雅的。 - Paul Creasey
@Paul 绝对同意，这就是为什么我在我的回答开头提到了 jQuery。我认为闭包解决方案比基于数组的解决方案更加优雅。我曾经在很多问题中提供“使用 jQuery”作为答案，直到有人告诉我并不是每个人都想要或者能够使用它。因此，我尝试提供不使用 jQuery 的替代解决方案。 - Vivin Paliath
3
在 jQuery 中，您可以执行以下操作：
$(document).onload(function() {
  // do something
}

//然后稍后执行

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

jQuery会智能地将两个事件添加到onload事件中，并且当页面加载时两个事件都将被执行。使用jQuery还可以得到跨浏览器支持的额外奖励。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接