向window.onload添加两个函数

Question

我的表单上有两个函数,但如果另一个处于活动状态则一个函数不起作用.这是我的代码:

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

我的意思是,当我在我的表单中同时具有这两个功能时,第二个功能正常工作但第一个功能不起作用,如果取出第二个功能,第一个功能将正常工作,为什么会发生这种情况？是因为名字吗？

Answer 1

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

Answer 2

尝试将所有代码放入相同的[且仅1] onload方法中!

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

Answer 3

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

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

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

以这种方式,两个处理程序都被调用.

Answer 4

您不能分配两个不同的功能window.onload.最后一个将永远胜利.这解释了为什么如果删除最后一个,第一个开始按预期工作.

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

Answer 5

因为你压倒了它.如果你想这样做,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"

演示: http ://jsbin.com/akegut/1/edit

编辑:如果您想扩展多个功能,可以使用:

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

Answer 6

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

Answer 7

如果您无法访问旧的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");
        });

Answer 8

简单使用（jQuery）：

$(window).load(function() {
  //code
})

$(window).load(function() {
 //code
})

Answer 9

为什么不直接从一个onload函数调用这两个函数呢？

function func1() {
    // code
}

function func2() {
    // code
}

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