window.onload-优快云博客

本文详细介绍了如何使用HTML和JavaScript实现window.onload事件同时执行多个函数，包括直接调用、函数内调用、body标签内调用以及自定义函数式调用四种方法，并讨论了各自的适用场景和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[size=medium]window.onload
同时执行多个函数的解决方法
1.
最简单的调用方式
直接写到
html
的
body
标签里面，如下示例：
程序代码
<html>
<body onload="function()">
</body>
</html>
2.
在
JavaScript
语句里调用
程序代码
<script>
function f1(){...}
window.onload=f1;
</script>
3.
同时调用多个函数
(body
方式
)

程序代码

<html>
<body onload="function1();function2();function3();">
</body>
</html>
4.
在
JavaScript
语句中同时调用多个函数
程序代码
<script>
function f1(){...}
function f2(){...}
function f3(){...}
function f4(){...}
window.onload=function(){
f1();
f2();
f3();
f4();
}
</script>

这种调用方式可以用于不太复杂的
JavaScript
程序中，如果程序函数很多，逻辑比较复杂，
可以考虑用另外一种方式。

5.
自定义函数式多次调用

程序代码

<script>
function f1(){...}
function f2(){...}
function f3(){...}
function f4(){...}
//onload
事件侦听函数

function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!="function") {

window.onload=func;
}else{

window.onload=function() {

oldonload();

func();}};
}
//
调用方式

addLoadEvent(f1);
addLoadEvent(f2);
addLoadEvent(f3);
addLoadEvent(f4);
</script>

这种方式调用比较方便，逻辑清晰。

但要注意的问题是，不可以同时混合运用两种调用方式，因为
onload
事件只有一次。
[/size]