Javascript 向window.onload添加两个函数

我的表单上有两个函数，除了一个在另一个处于活动状态时不起作用。这是我的密码：

window.onload = function(event) {
    var $input2 = document.getElementById('dec');
    var $input1 = document.getElementById('parenta');
    $input1.addEventListener('keyup', function() {
        $input2.value = $input1.value;
    });
}

window.onload=function(){
    document.getElementById('enable').onchange=function(){
        var txt = document.getElementById('gov1');
        if(this.checked) txt.disabled=false;
        else txt.disabled = true;
    };
};

---

我的意思是，当我的形式中有这两个函数时，第二个函数工作得很好，但第一个函数不工作，如果去掉第二个函数，第一个函数会正常工作，为什么会发生这种情况？是因为名称吗？

您不能将两个不同的函数分配给

窗口。onload

。最后一个总会赢。这解释了为什么如果删除最后一个，第一个将按预期工作

---

看起来您应该将第二个函数的代码合并到第一个函数中。

尝试将所有代码放入同一个[且仅1]onload方法中

 window.onload = function(){
        // All code comes here 
 }

---

当您将第二个函数放入

窗口。onload

时，基本上您所做的是替换一个值。正如有人之前所说，您可以将两个函数合并为一个函数，然后将

window.onload

设置为该值。如果您感到困惑，请这样想，如果您有一个对象

object

，并且您有

object.value=7；object.value=20

该值将为20

window

只是另一个对象

window.addEventListener("load",function(event) {
    var $input2 = document.getElementById('dec');
    var $input1 = document.getElementById('parenta');
    $input1.addEventListener('keyup', function() {
        $input2.value = $input1.value;
    });
},false);

window.addEventListener("load",function(){
    document.getElementById('enable').onchange=function(){
        var txt = document.getElementById('gov1');
        if(this.checked) txt.disabled=false;
        else txt.disabled = true;
    };
},false);

文件是

---

请注意，此解决方案可能无法跨浏览器工作。我认为您需要依赖于第三个库，比如jquery

$（document）。ready

您不能将多个函数绑定到window.onload，而期望所有这些函数都将被执行。另一种方法是使用$（document）.ready而不是window.onload，如果您已经在项目中使用jQuery。

，因为您正在覆盖它。如果要使用

onload

执行此操作，只需扩展前面的函数即可。这里有一种方法：

Function.prototype.extend = function(fn) {
  var self = this;
  return function() {
    self.apply(this, arguments);
    fn.apply(this, arguments);
  };
};

window.onload = function() {
  console.log('foo');
};

window.onload = window.onload.extend(function() {
  console.log('bar');
});

// Logs "foo" and "bar"

演示：

编辑：如果要扩展多个功能，可以使用以下功能：

Function.prototype.extend = function() {
  var fns = [this].concat([].slice.call(arguments));
  return function() {
    for (var i=0; i<fns.length; i++) {
      fns[i].apply(this, arguments);
    }
  };
};

window.onload = window.onload.extend(function(){...}, function(){...}, ...);

Function.prototype.extend=Function（）{
var fns=[this].concat（[].slice.call（参数））；
返回函数（）{
对于（var i＝0；i），如果您绝对需要作为“代码>窗口.OnLoad ”的结果触发单独的方法，可以考虑设置将被触发的回调函数队列。
最简单的形式可能是这样的：

var queue = [];
var loaded = false;

function enqueue(callback)
{
    if(!loaded) queue.push(callback);
    else callback();
}

window.onload = function()
{
    loaded = true;
    for(var i = 0; i < queue.length; i++)
    {
        queue[i]();
    }
}

如果由于某种原因无法组合这些功能，但您可以控制其中一个功能，则可以执行以下操作：

window.onload = function () {
    // first code here...
};

var prev_handler = window.onload;
window.onload = function () {
    if (prev_handler) {
        prev_handler();
    }
    // second code here...
};

通过这种方式，两个处理程序都会被调用。
通过保持2 window.onload（），最后一个块中的代码将被执行。
有一段时间，我将上述解决方案用于：

window.onload = function () {
    // first code here...
};

var prev_handler = window.onload;
window.onload = function () {
    if (prev_handler) {
        prev_handler();
    }
    // second code here...
};

但是，在某些情况下，它会导致IE抛出“堆栈溢出错误”，如本文所述：
写一篇好文章

在阅读了所有建议的解决方案并考虑到jquery不可用后，我想到了这一点（通过一些浏览器兼容性检查进一步扩展Khanh TO的解决方案），您认为这样的实现合适吗：

function bindEvent(el, eventName, eventHandler) {
            if (el.addEventListener){
                    el.addEventListener(eventName, eventHandler, false); 
                } else if (el.attachEvent){
                    el.attachEvent("on"+eventName, eventHandler);
                }
            }
      render_errors = function() {
      //do something
      }

      bindEvent(window, "load", render_errors);

      render_errors2 = function() {
      //do something2
      }

      bindEvent(window, "load", render_errors2);

window.addEventListener在IE中不起作用，因此请使用window.attachEvent

你可以这样做

function fun1(){
    // do something
}

function fun2(){
    // do something
}


var addFunctionOnWindowLoad = function(callback){
      if(window.addEventListener){
          window.addEventListener('load',callback,false);
      }else{
          window.attachEvent('onload',callback);
      }
}

addFunctionOnWindowLoad(fun1);
addFunctionOnWindowLoad(fun2);

简单使用（jQuery）：

如果您无法访问旧的window.onload，但仍希望保留并添加另一个window.onload，请按以下方法操作：

       function addOnload(fun){
          var last = window.onload;
          window.onload = function(){
            if(last) last();
            fun();
          }
        } 

        addOnload(function(){
            console.log("1");
        });

        addOnload(function(){
            console.log("2");
        });

为什么不从一个
onload
-函数调用两个函数呢

function func1() {
    // code
}

function func2() {
    // code
}

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

我不喜欢其他答案，找到了另一种方法

这可以通过此功能实现。

readyState有3个选项：加载、交互和完成

因此，此脚本可以工作：

<script>
  if (typeof whenDocReady === "function") {
    // already declared, do nothing
  } else {
    function whenDocReady(fn) {
      // see if DOM is already available
      if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
      } else {
        document.addEventListener("DOMContentLoaded", fn);
      }
    }
  }
</script>


if（当增量为“函数”时的类型）{
//已经声明，什么也不做
}否则{
增量时的功能（fn）{
//查看DOM是否已经可用
如果（document.readyState==“完成”| | document.readyState===“交互”）{
//在下一个可用的时间打电话
设置超时（fn，1）；
}否则{
文件。添加的文件列表（“DOMContentLoaded”，fn）；
}
}
}

定义此脚本后的用法：

<script>
whenDocReady(function() {
//do whatever stuff what you would do on window.onload
};
</script>


whenDocReady（函数（）{
//做任何你想在window.onload上做的事情
};

信用证：
为什么不将第二个函数中的功能添加到第一个函数中。或者从第一个函数中调用第二个函数。为什么不继续使用更好的方法来处理事件-
addEventListener
？这样就不会有这样的覆盖问题
+1
，但是，他使用了
addEventListener
已经在他的代码中，所以这个解决方案是公平的。下面的+1答案，如extend或IE specific，可能会满足跨浏览器支持，如果vanilla JS实现是可取的。如果IE10和其他浏览器支持addEventListener意味着除了默认句柄之外添加更多的EventListener，这是好的和简单的：onload、onReadyStateChange、ReadyStateChangee、 这不会影响使用第三方脚本。希望将来不会出现此规范不匹配的问题。我会这样做。+1I get
Uncaught RangeError:超过最大调用堆栈大小
error:（我还遇到了堆栈溢出错误。我认为问题在于prev_处理程序最终指向window.onload函数本身，该函数反过来调用调用window.onload函数的prev_处理程序。请尝试创建一个双委托，如中所示，我无法这样做，因为我的onload函数是动态回显的…=/当这种情况发生时，您可能会nt重构代码，其中一个所谓的注册表获取所有函数，然后输出一个调用其他函数的函数这似乎是一个不错的选择，但对我来说不起作用。你应该在
}
之后添加
。
（我不能直接编辑，因为每次编辑至少需要6个字符）只修改您自己的原型。从不修改标准JavaScript对象的原型。来源：
<script>
  if (typeof whenDocReady === "function") {
    // already declared, do nothing
  } else {
    function whenDocReady(fn) {
      // see if DOM is already available
      if (document.readyState === "complete" || document.readyState === "interactive") {
        // call on next available tick
        setTimeout(fn, 1);
      } else {
        document.addEventListener("DOMContentLoaded", fn);
      }
    }
  }
</script>

<script>
whenDocReady(function() {
//do whatever stuff what you would do on window.onload
};
</script>