将两个函数添加到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; }; }; 

我的意思是当我的表单中有这两个函数时,第二个函数可以正常工作,但是第一个函数不起作用,如果取出第二个函数,第一个函数将正常工作,为什么会这样呢? 是因为名字吗?

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

  window.onload = function(){ // All code comes here } 
 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

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

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

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

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

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

因为你压倒了它。 如果你想用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(){...}, ...); 

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

如果你绝对必须有作为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; }; }); 

有一段时间我用上面的解决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); 

如果你不能访问旧的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"); }); 

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

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

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

简单使用(jQuery):

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