64

我的表单上有两个功能，但如果另一个处于活动状态，一个则不起作用。这是我的代码：

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

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

4

17 回答 17

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

文档在这里

请注意，此解决方案可能无法跨浏览器工作。我认为您需要依赖 3-rd 库，例如 jquery$(document).ready

于 2013-05-22T04:00:16.987 回答
42

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

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

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

以这种方式，两个处理程序都被调用。

于 2013-05-22T04:12:25.410 回答
34

尝试将所有代码放入相同的 [并且只有 1 个] onload 方法！

 window.onload = function(){
        // All code comes here 
 }
于 2013-05-22T03:55:46.473 回答
15

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

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

于 2013-05-22T03:53:34.587 回答
10

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);
于 2015-04-10T07:23:08.870 回答
9

因为你正在覆盖它。如果你想这样做，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(){...}, ...);
于 2013-05-22T04:03:04.470 回答
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");
        });
于 2016-11-02T16:24:26.337 回答
5

简单地使用（jQuery）：

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

$(window).load(function() {
 //code
})
于 2016-02-19T13:36:26.760 回答
4

一段时间以来，我将上述解决方案用于：

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

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

但是，在某些情况下，它会导致 IE 抛出此帖子中描述的“堆​​栈溢出错误”： Internet Explorer 上的“第 0 行中的堆栈溢出”，并在此处 进行了很好的说明

在阅读了所有建议的解决方案并记住 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);
于 2013-12-03T08:55:13.397 回答
3

通过保留 2 window.onload()，执行最后一个块中的代码。

于 2013-06-04T11:39:15.870 回答
3

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

function func1() {
    // code
}

function func2() {
    // code
}

window.onload = function() {
    func1();
    func2();
}
于 2019-02-27T08:49:20.817 回答
2

当您将第二个功能放入window.onload基本上您正在做的事情是替换一个值。正如有人之前所说，您可以将这两个功能放在一个功能中并设置window.onload为该功能。如果您感到困惑，请这样想，如果您有一个 object object，并且您做object.value = 7; object.value = 20了，那么值将是 20window只是另一个对象

于 2013-05-22T03:58:59.837 回答
2

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

于 2013-05-22T04:01:13.803 回答
2

如果您绝对必须触发单独的方法作为 的结果window.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]();
    }
}

并在您的情况下使用，如下所示：

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

    });

});

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

});
于 2013-05-22T04:03:13.467 回答
1

这对我有用

function first() {
    console.log(1234);
}

function second() {
    console.log(5678);
}

const windowOnload = window.onload = () => {
    first();
    second();
};

windowOnload();

安慰

1234

5678

于 2021-06-29T09:35:58.620 回答
0

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

这可以通过这个功能来实现。
readyState 有 3 个选项加载、交互和完整https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

因此，此脚本将起作用：

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

信用：https ://stackoverflow.com/a/9899701/1537394

于 2020-01-28T07:58:54.097 回答
0

使用承诺：

    function first(){
          console.log("first");
    }

    function second(){
          console.log("second");
    }
    
    isLoaded = new Promise((loaded)=>{ window.onload = loaded });
    isLoaded.then(first);
    isLoaded.then(second);
于 2021-07-30T14:59:00.083 回答