向 window.onload 添加两个函数

我有两个函数在我的形式,除了一个不工作,如果另一个是活动的。这是我的代码:

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

我的意思是,当我在我的形式中有这两个函数时,第二个函数工作得很好,但是第一个函数不工作,如果取出第二个函数,第一个函数会像正常情况一样工作,为什么会发生这种情况?是因为那些名字吗?

84168 次浏览

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

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

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

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

当你把第二个函数放入 window.onload时,你所做的基本上就是替换一个值。如前所述,可以将两个函数放在一个函数中,并将 window.onload设置为该函数。如果你感到困惑,这样想,如果你有一个对象 object,你做了 object.value = 7; object.value = 20的值将是20 window只是另一个对象

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个库,比如 jquery $(document).ready

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

因为你在重写它。如果你想用 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"

演示: < a href = “ http://jsbin.com/akegut/1/edit”> 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(){...}, ...);

如果由于 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;
};


});

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

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


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

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

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

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

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

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

简单使用(jQuery) :

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


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

如果你不能访问旧的 窗口,上传,但仍然想保留和添加另一个,这里是方法,

       function addOnload(fun){
var last = window.onload;
window.onload = function(){
if(last) last();
fun();
}
}


addOnload(function(){
console.log("1");
});


addOnload(function(){
console.log("2");
});

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

function func1() {
// code
}


function func2() {
// code
}


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

我不喜欢别的答案,于是找到了另一种方法。

这可以通过这个函数来实现。
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

这招对我很管用

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


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


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


windowOnload();

控制台

1234

5678

使用承诺:

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


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

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