代码之家 › 专栏 › 技术社区 › anthares

在javascript中是否有用于window.onload的+=

anonymous-function onload jquery javascript asp.net

anthares · 技术社区 · 15 年前

最近我发现了以下问题:

在我的网站的所有HTML页面中,我调用body onload事件中的函数:

<body onLoad="func1();">

这是我的HTML模板的一部分,因此它出现在我的网站的每个页面上,我无法更改。现在,问题是在某些页面上,我需要调用一些其他函数onload,我尝试使用window.onload属性,但它会抹去对func1的调用…

我现在可以说:

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

但这看起来又脏又跛?不是吗?

那么,有没有一种方法可以在不删除旧函数的情况下,将一些函数添加到将要在onload上执行的函数中呢?此外,我使用ASP.NET,如果这可以帮助…

谢谢!

5 回复 | 直到 15 年前

Vivin Paliath 15 年前

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

Daniel Vassallo 15 年前

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

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 .

findshorty 15 年前

jquery有一个很好的简写,用于向“ready”事件添加多个定义的处理程序(不适用于必须使用$(document).ready(function()));)的匿名函数)。

简单地

$(myFunction);
$(myFunction2);

一个很大的优点是,如果已经加载了DOM,它仍然会被激发,而在事件之后绑定到window.onload的任何内容都不会被调用。

Paul Creasey 15 年前

你有没有考虑过像jquery这样的javascript库,我知道还有其他的方法,但是jquery会让你的生活更轻松…

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

经典的方法是将所有的函数都放在页面的底部:)

Chris 15 年前

在jquery中,您可以

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

//稍后再做

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

jquery将智能地将这两个事件添加到onload事件中,并且这两个事件都将在页面加载时执行。通过jquery,您还可以获得交叉浏览器支持作为额外的奖励。