将两个函数添加到window.onload

我在表单上有两个function，除非一个function处于活动状态，否则无法工作。 这是我的代码：

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

尝试把你所有的代码放在相同的[和只有1] onload方法！

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

Answer 2

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

文档在这里

请注意，这个解决scheme可能无法跨浏览器使用。 我认为你需要依赖一个3-rd库，如jquery $(document).ready

Answer 3

如果由于某种原因你不能合并function，但是你可以控制其中一个function，你可以这样做：

 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。 以下是一种方法：

 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，你可以使用这个：

 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结果触发的单独的方法，你可以考虑设置一个将被触发的callback函数队列。

最简单的forms可以是这样的：

 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 8

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

 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行”，在这里写一个好的写法

在阅读完所有build议的解决scheme并记住jQuery不可用的情况下，我想到了这一点（通过一些浏览器兼容性检查进一步扩展了Khanh TO的解决scheme），您认为这样的实现是否合适：

 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

如果你不能访问旧的window.onload，但仍然想保留和添加另一个，这里的方式，

  function addOnload(fun){ var last = window.onload; window.onload = function(){ if(last) last(); fun(); } } addOnload(function(){ console.log("1 window is loaded"); }); addOnload(function(){ console.log("2 window is loaded"); }); addOnload(function(){ console.log("3 window is loaded"); }); addOnload(function(){ console.log("4 window is loaded"); }); 

Answer 10

当你把第二个函数放入window.onload基本上你正在做的是replace一个值。 正如有人所说，你可以把这两个函数放在一个函数中，并设置window.onload 。 如果你困惑的话就这样想，如果你有一个对象object ，而你做了object.value = 7; object.value = 20 object.value = 7; object.value = 20的值将是20 window只是另一个对象

Answer 11

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

Answer 12

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

Answer 13

简单使用（jQuery）：

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