添加到window.onload事件？

Question

我想知道如果已经为window.onload事件分配了方法调用,如何向window.onload事件添加另一个方法调用.

假设脚本中的某处我有这个任务......

 window.onload = function(){ some_methods_1() };

然后在脚本中我有这个任务

 window.onload = function(){ some_methods_2() };

就目前而言,只会some_methods_2被召唤.有没有办法添加到以前的window.onload回调而不取消some_methods_1？(并且也不包括两者some_methods_1()并且some_methods_2()在同一功能块中).

我想这个问题并不是window.onload关于javascript的问题.我不想以window.onload这样的方式分配内容:如果另一个开发人员处理脚本并添加一段也使用的代码window.onload(不查看我以前的代码),他将禁用我的onload事件.

我也想知道同样的事情

  $(document).ready()

在jquery.如何在不破坏之前发生的事情或者可能发生的事情的情况下添加它？

Answer 1

您可以使用attachEvent(ie8)和addEventListener

addEvent(window, 'load', function(){ some_methods_1() });
addEvent(window, 'load', function(){ some_methods_2() });

function addEvent(element, eventName, fn) {
    if (element.addEventListener)
        element.addEventListener(eventName, fn, false);
    else if (element.attachEvent)
        element.attachEvent('on' + eventName, fn);
}

Answer 2

如果您使用的是jQuery,则无需执行任何特殊操作.添加的处理程序$(document).ready()不会相互覆盖,而是依次执行:

$(document).ready(func1)
...
$(document).ready(func2)

如果您不使用jQuery,可以使用addEventListener,如Karaxuna所示,以及attachEventIE <9.

注意,这onload不等同于$(document).ready()- 前者等待CSS,图像......以及后者仅等待DOM树.现代浏览器(以及IE9以来的IE)支持DOMContentLoaded文档上的事件,它对应于jQuery ready事件,但IE <9则不支持.

if(window.addEventListener){
  window.addEventListener('load', func1)
}else{
  window.attachEvent('onload', func1)
}
...
if(window.addEventListener){
  window.addEventListener('load', func2)
}else{
  window.attachEvent('onload', func2)
}

如果两个选项是可用的(例如,你是不是处理DOM节点),你仍然可以做到这一点(我用onload作为例子,但其他选项都可用onload):

var oldOnload1=window.onload;
window.onload=function(){
  oldOnload1 && oldOnload1();
  func1();
}
...
var oldOnload2=window.onload;
window.onload=function(){
  oldOnload2 && oldOnload2();
  func2();
}

或者,为了避免污染全局命名空间(并且可能遇到命名空间冲突),使用导入/导出IIFE模式:

window.onload=(function(oldLoad){
  return function(){
    oldLoad && oldLoad();
    func1();
  }
})(window.onload)
...
window.onload=(function(oldLoad){
  return function(){
    oldLoad && oldLoad();
    func2();
  }
})(window.onload)

Answer 3

基本上有两种方式

1. 存储以前的值,window.onload以便您的代码可以在代码执行之前或之后调用前一个处理程序

2. 使用这种addEventListener方法(当然微软不喜欢并要求你使用另一个不同的名称).

如果另一个脚本想要使用window.onload并且没有考虑合作,第二种方法会给你更多的安全性,但Javascript的主要假设是所有脚本都会像你想要的那样合作.

请注意,不是设计用于其他未知脚本的错误脚本将始终能够破坏页面,例如通过弄乱原型,污染全局命名空间或破坏dom.

Answer 4

这可能不是一个受欢迎的选项，但有时脚本最终会分布在不同的块中，在这种情况下，我发现这是一个快速修复

if(window.onload != null){var f1 = window.onload;}
window.onload=function(){
    //do something

    if(f1!=null){f1();}
}

然后在其他地方...

if(window.onload != null){var f2 = window.onload;}
window.onload=function(){
    //do something else

    if(f2!=null){f2();}
}

这将根据需要更新 onload 函数和链