控制台

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

文档为here

请注意，此解决方案可能无法跨浏览器运行。我认为你需要依赖一个第三个库，比如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

有一段时间我用上面的解决方案：

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

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

然而，它在某些情况下导致IE抛出此帖子中描述的“堆栈溢出错误”： "Stack overflow in line 0" on Internet Explorer 并对其进行了良好的记录here

在阅读了所有建议的解决方案并考虑到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);

Answer 9

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

Answer 10

简单地使用（jQuery）：

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

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

Answer 11

如果绝对必须由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;
    };

});

Answer 12

当你将第二个函数放入window.onload时，基本上你正在做的是替换一个值。正如有人所说，你可以把这两个函数放在一个函数中并设置window.onload。如果您感到困惑，请考虑这种方式，如果您有一个对象object，而您object.value = 7; object.value = 20的值为window，则{{1}}只是另一个对象

Answer 13

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

Answer 14

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

function func1() {
    // code
}

function func2() {
    // code
}

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

Answer 15

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

可以通过此功能实现。
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

Answer 16

这对我有用

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

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

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

windowOnload();

控制台

1234

5678

Answer 17

使用承诺：

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

    function second(){
          console.log("second");
    }
    
    isLoaded = new Promise((loaded)=>{ window.onload = loaded });
    isLoaded.then(first);
    isLoaded.then(second);

向window.onload添加两个函数

17 个答案:

控制台