添加多个window.onload事件

时间:2020-03-05 18:39:19  来源:igfitidea点击:

在我的ASP.NET用户控件中,我向window.onload事件添加了一些JavaScript:

if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), onloadScriptName))
  Page.ClientScript.RegisterStartupScript(this.GetType(), onloadScriptName, 
    "window.onload = function() {myFunction();};", true);

我的问题是,如果onload事件中已经有东西,那么它将覆盖它。我该如何允许两个用户控件在onload事件中分别执行JavaScript?

编辑:感谢我们对第三方库的信息。我会牢记在心的。

解决方案

回答

我对ASP.NET不太了解,但是为什么不为onload事件编写一个自定义函数,该事件又会为我们调用这两个函数?如果我们有两个功能,请从注册该事件的第三个脚本中调用它们。

回答

我们是否考虑过使用诸如JQuery之类的东西,它提供了清理添加多个事件处理程序的框架?

回答

试试这个:

window.attachEvent("onload", myOtherFunctionToCall);

function myOtherFunctionToCall() {
    // do something
}

编辑:嘿,我刚刚准备好使用Firefox登录并自己重新格式化!似乎仍无法使用IE7为我设置代码格式。

回答

实际上,根据此MSDN页面,我们似乎可以多次调用此函数来注册多个脚本。我们只需要使用不同的键(第二个参数)。

Page.ClientScript.RegisterStartupScript(
    this.GetType(), key1, function1, true);

Page.ClientScript.RegisterStartupScript(
    this.GetType(), key2, function2, true);

我相信应该可以。

回答

Mootools是另一个很棒的JavaScript框架,它相当容易使用,就像RedWolves用jQuery所说的那样,我们可以随心所欲地处理尽可能多的处理程序。

对于我包括的每个* .js文件,我只是将代码包装在一个函数中。

window.addEvent('domready', function(){
    alert('Just put all your code here');
});

使用domready代替onload也有很多优点

回答

还有一个丑陋的解决方案(它不如使用框架或者addEventListener/attachEvent)保存当前的onload事件:

function addOnLoad(fn)
{ 
   var old = window.onload;
   window.onload = function()
   {
       old();
       fn();
   };
}

addOnLoad(function()
{
   // your code here
});
addOnLoad(function()
{
   // your code here
});
addOnLoad(function()
{
   // your code here
});

请注意,像jQuery这样的框架将提供一种在DOM准备就绪时而不是在页面加载时执行代码的方法。

准备就绪的DOM意味着HTML已加载,但未加载图像或者样式表之类的外部组件,从而使我们可以在加载事件触发前很长时间被调用。

回答

我知道已经回答了,但是我只想让我们了解此功能:

http://phrogz.net/JS/AttachEvent_js.txt

问候T

回答

建议的大多数"解决方案"都是特定于Microsoft的,或者需要膨胀的库。这是一种好方法。这适用于W3C兼容的浏览器和Microsoft IE。

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}

回答

我今天有一个类似的问题,所以我解决了一个带有以下内容的" index.js":

window.onloadFuncs = [];

window.onload = function()
{
 for(var i in this.onloadFuncs)
 {
  this.onloadFuncs[i]();
 }
}

在我想要添加onload事件的其他js文件中,我只需要这样做:

window.onloadFuncs.push(function(){
 // code here
});

虽然我通常使用jQuery,但是这次我只限于纯粹的js,被迫花了一段时间!