jQuery 添加到 window.onload 事件？

adding to window.onload event?

提问by pepper

I'm wondering how to add another method call to the window.onload event once it has already been assigned a method call.

我想知道一旦 window.onload 事件已经被分配了一个方法调用，如何向它添加另一个方法调用。

Suppose somewhere in the script I have this assignment...

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

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

and then later on in the script I have this assignment

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

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

As it stands, only some_methods_2will be called. Is there any way to add to the previous window.onloadcallback without cancelling some_methods_1? (and also without including both some_methods_1()and some_methods_2()in the same function block).

就目前而言，只会some_methods_2被调用。有没有办法在window.onload不取消的情况下添加到之前的回调some_methods_1？（并且还没有既包括some_methods_1()与some_methods_2()在相同的功能块）。

I guess this question is not really about window.onloadbut a question about javascript in general. I DON'T want to assign something to window.onloadin such a way that that if another developer were to work on the script and add a piece of code that also uses window.onload(without looking at my previous code), he would disable my onload event.

我想这个问题不是真的，window.onload而是关于 javascript 的一般问题。我不想以window.onload这样的方式分配一些东西，如果另一个开发人员要处理脚本并添加一段也使用的代码window.onload（不查看我以前的代码），他将禁用我的 onload 事件。

I'm also wondering the same thing about

我也想知道同样的事情

  $(document).ready()

in jquery. How can I add to it without destroying what came before, or what might come after?

在jQuery中。我怎样才能在不破坏之前或之后的内容的情况下添加它？

采纳答案by John Dvorak

If you are using jQuery, you don't have to do anything special. Handlers added via $(document).ready()don't overwrite each other, but rather execute in turn:

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

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

---

---

If you are not using jQuery, you could use addEventListener, as demonstrated by Karaxuna, plus attachEventfor IE<9.

如果您不使用 jQuery，则可以使用addEventListener，如 Karaxuna 所演示的，加上attachEventIE<9。

Note that onloadis not equivalent to $(document).ready()- the former waits for CSS, images... as well, while the latter waits for the DOM tree only. Modern browsers (and IE since IE9) support the DOMContentLoadedevent on the document, which corresponds to the jQuery readyevent, but IE<9 does not.

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

---

---

If neither option is available (for example, you are not dealing with DOM nodes), you can still do this (I am using onloadas an example, but other options areavailable for onload):

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

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

or, to avoid polluting the global namespace (and likely encountering namespace collisions), using the import/export IIFE pattern:

或者，为了避免污染全局命名空间（并可能遇到命名空间冲突），使用导入/导出 IIFE 模式：

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

回答by karaxuna

You can use attachEvent(ie8) and addEventListener instead

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

回答by 6502

There are basically two ways

基本上有两种方式

1. store the previous value of window.onloadso your code can call a previous handler if present before or after your code executes

2. using the addEventListenerapproach (that of course Microsoft doesn't like and requires you to use another different name).

1. 存储之前的值，window.onload以便您的代码可以在代码执行之前或之后调用之前的处理程序（如果存在）

2. 使用该addEventListener方法（当然，Microsoft 不喜欢并要求您使用另一个不同的名称）。

The second method will give you a bit more safety if another script wants to use window.onloadand does it without thinking to cooperation but the main assumption for Javascript is that all the scripts will cooperate like you are trying to do.

如果另一个脚本想要使用window.onload并且在不考虑合作的情况下执行它，则第二种方法会给您更多的安全性，但 Javascript 的主要假设是所有脚本都将像您尝试做的那样合作。

Note that a bad script that is not designed to work with other unknown scripts will be always able to break a page for example by messing with prototypes, by contaminating the global namespace or by damaging the dom.

请注意，一个不适合与其他未知脚本一起使用的坏脚本总是能够破坏页面，例如通过弄乱原型、污染全局命名空间或破坏 dom。

回答by Daniel

This might not be a popular option, but sometimes the scripts end up being distributed in various chunks, in that case I've found this to be a quick fix

这可能不是一个流行的选择，但有时脚本最终会以不同的块分布，在这种情况下，我发现这是一个快速解决方案

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

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

then somewhere else...

然后在别的地方...

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

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

this will update the onload function and chain as needed

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