添加到窗口.onload事件

adding to window.onload event?

本文关键字：事件 onload 窗口 添加      更新时间：2023-09-26

我想知道如何添加另一个方法调用的窗口。Onload事件被分配了一个方法调用

假设在脚本的某个地方我有这个分配…

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

然后在脚本中我有这个赋值

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

目前，只调用some_methods_2。有没有办法在不取消some_methods_1的情况下增加之前的window.onload回调?(也不包括some_methods_1()和some_methods_2()在同一功能块)。

我想这个问题不是真的关于window.onload，而是一个关于javascript的问题。我不想给window.onload分配这样一种方式，如果另一个开发人员在脚本上工作，并添加一段代码，也使用window.onload(不看我以前的代码)，他会禁用我的onload事件。

我也想知道同样的事情关于

  $(document).ready()
在jquery

。我怎样才能在不破坏之前或之后的东西的情况下增加它呢?

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

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

如果你不使用jQuery，你可以使用addEventListener，如Karaxuna所示，加上attachEvent的IE<9。

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

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();
}

或者，为了避免污染全局命名空间(并可能遇到命名空间冲突)，使用import/export IIFE模式:

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

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

基本上有两种方法

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

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

如果另一个脚本想要使用window.onload并且不考虑合作，第二个方法将给你更多的安全，但Javascript的主要假设是所有脚本都将像你试图做的那样合作。

请注意，一个不被设计为与其他未知脚本一起工作的坏脚本总是能够破坏页面，例如，通过混淆原型，通过污染全局命名空间或损坏dom。

这可能不是一个流行的选择，但有时脚本最终以各种块分发，在这种情况下，我发现这是一个快速修复

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函数和链

一个纯JavaScript(非jQuery)方法，它不会覆盖现有的onload事件，而是添加到它，将是:

window.addEventListener('load', function() {
    // do your things here
}
相关文章：