简体   繁体   English

Javascript中是否有+ = for window.onload?

[英]Is there += for window.onload in Javascript?

recently I came up with the following problem: 最近我想出了以下问题:

In my web site in all html pages I call a function in body onLoad event: 在我所有html页面的网站中,我在body onLoad事件中调用了一个函数:

<body onLoad="func1();">

This is part of my template for html, so it appears on every page in my site and I can't change that. 这是我的html模板的一部分,因此它出现在我网站的每个页面上,我无法改变它。 Now, the deal is that on some pages, I need to call some other functions onload and I tried with window.onload property, but it wipes the calling of func1... 现在,交易是在某些页面上,我需要调用一些其他函数onload,我尝试使用window.onload属性,但它擦除了func1的调用...

I now that I can just say: 我现在可以说:

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

but this seems dirty and lame? 但这看起来很脏又蹩脚? Isn't it ? 不是吗?

So, is there a way to add some functions to those that are about to be executed onload, without deleting the old one? 那么,有没有办法将一些函数添加到即将执行onload的那些函数而不删除旧函数? In addition I use asp.net if that could help ... 另外我使用asp.net,如果这可以帮助...

Thanks! 谢谢!

You can use jQuery to chain on load handlers. 您可以使用jQuery链接加载处理程序。 Repeatedly using jQuery.load or jQuery(document).ready will chain your handlers (I believe). 反复使用jQuery.loadjQuery(document).ready将链接你的处理程序(我相信)。 You other option is to do it programmatically, which means you need an auxiliary function that will chain your onload handlers for you. 您还可以选择以编程方式执行此操作,这意味着您需要一个辅助函数来为您链接onload处理程序。 You can do this with a closure (or anonymous function): 您可以使用闭包(或匿名函数)执行此操作:

var addOnLoadHandler = function(newHandler) {

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

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

You will have to bind your functions programmatically though, so you would have to do: 您必须以编程方式绑定您的函数,因此您必须这样做:

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

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

in a javascript file (or in your html file). 在javascript文件中(或在您的html文件中)。

Another approach is to use an array: 另一种方法是使用数组:

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;
}

In your HTML or Javascript file you do: 在您的HTML或Javascript文件中,您执行以下操作:

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

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

Then in your html you can just do <body onload="runOnLoads()"> 然后在你的html中你可以做<body onload="runOnLoads()">

You may want to make the best out of anonymous functions: 您可能希望充分利用匿名函数:

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

Borrowed from the Top 10 custom JavaScript functions of all time . 借鉴了有史以来十大自定义JavaScript功能

jQuery has a nice shorthand for adding multiple defined handlers to the "ready" event (does not work with anonymous functions where you have to use $(document).ready(function(){});). jQuery有一个很好的简写,用于向“ready”事件添加多个定义的处理程序(不能使用匿名函数,你必须使用$(document).ready(function(){});)。

simply 只是

$(myFunction);
$(myFunction2);

One big advantage is that if the DOM has already loaded, this still gets fired, whereas anything you bind to window.onload after the event will not get called. 一个很大的优点是,如果DOM已经加载,这仍然会被触发,而事件之后绑定到window.onload的任何内容都不会被调用。

have you considered a javascript library like jquery, i know that there are other approaches but jquery will make your life so much easier... 你有没有考虑像jquery这样的javascript库,我知道还有其他的方法,但jquery会让你的生活变得如此简单......

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

The classic approach is to just stick all of your functions at the bottom of the page :) 经典的方法是将所有功能都放在页面底部:)

In jquery you can do 在jquery你可以做到

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

//then later on do //然后再做

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

jQuery will intelligently add both events to the onload event and both will be executed when the page loads. jQuery将智能地将两个事件添加到onload事件中,并且两者都将在页面加载时执行。 With jQuery you also get crossbrowser support as an added bonus. 使用jQuery,您还可以获得crossbrowser支持作为额外奖励。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM