63

我想知道如何为 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中。我怎样才能在不破坏之前或之后的内容的情况下添加它？

4

4 回答 4

58

如果你使用 jQuery，你不需要做任何特别的事情。通过添加的处理程序$(document).ready()不会相互覆盖，而是依次执行：

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

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

请注意，这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)
}

如果这两个选项都不可用（例如，您不处理 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)
于 2013-03-22T06:48:11.793 回答
48

您可以改用 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);
}
于 2013-03-22T06:26:21.793 回答
9

基本上有两种方式

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

  2. 使用这种addEventListener方法（微软当然不喜欢它并要求您使用另一个不同的名称）。

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

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

于 2013-03-22T06:34:56.613 回答
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 函数和链

于 2016-03-19T23:20:01.387 回答