Question

我想知道如何向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所示，加上attachEvent用于IE＆lt; 9。

请注意，onload不等同于$(document).ready() - 前者等待CSS，图像......以及后者仅等待DOM树。现代浏览器（以及IE9以来的IE）支持文档上的DOMContentLoaded事件，该事件对应于jQuery ready事件，但IE＆lt; 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

基本上有两种方式

存储前一个值window.onload，以便您的代码可以在代码执行之前或之后调用前一个处理程序
使用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函数和链

添加到window.onload事件？

4 个答案: