本文介绍如何在JavaScript中通过window.onload同时加载多个函数。直接赋值会导致覆盖,推荐使用匿名函数组合或封装addLoadEvent工具函数来依次执行多个初始化逻辑。
window.onload 基础用法与多函数加载问题
具体用法如下所示:
function func(){alert("this is window onload event!");return;}
window.onload=func;
或者采用以下写法:
window.onload=function(){alert("this is window onload event!");return;}
需要注意的是,直接对window.onload赋值无法同时加载多个函数。
例如:
代码如下:
function t(){
alert("t")
}
function b(){
alert("b")
}
window.onload =t ;
window.onload =b ; 后执行的赋值会覆盖前面的设置,上述代码最终只会输出 b。
通过匿名函数组合解决覆盖问题
此时可以采用以下方法解决:
window.onload =function() { t(); b(); }
封装 addLoadEvent 工具函数
另一种更通用的解决思路如下:
代码如下:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
} 具体使用方式如下:
代码如下:
function t(){
alert("t")
}
function b(){
alert("b")
}
function c(){
alert("c")
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(t);
addLoadEvent(b);
addLoadEvent(c);
//等价于 window.onload =function() { t(); b(); c() ;} 个人觉得直接使用匿名函数(如:window.onload =function() { t(); b(); c() ;})更为快捷,而使用 addLoadEvent 则显得更专业,可根据实际需求选择。