添加到 window.onload 事件？

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 中。我怎样才能在不破坏之前或之后可能发生的情况下添加它？

原文由 pepper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

---

如果您不使用 jQuery，则可以使用 addEventListener ，如 Karaxuna 所演示，加上 attachEvent 用于 IE。

请注意， onload 不等同于 $(document).ready() 前者等待 CSS、图像…，而后者仅等待 DOM 树。现代浏览器（以及自 IE9 以来的 IE）支持文档上的 DOMContentLoaded 事件，对应于 jQuery ready 事件，但 IE 不支持。

 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)

原文由 John Dvorak 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以改用 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);
}

原文由 karaxuna 发布，翻译遵循 CC BY-SA 3.0 许可协议