window.onload同时执行多个函数的解决方法

最新推荐文章于 2021-12-02 10:01:34 发布

最新推荐文章于 2021-12-02 10:01:34 发布 · 434 阅读

文章标签：

#JavaScript #HTML #XHTML #ViewUI

本文介绍在JavaScript中如何实现页面加载完成时同时执行多个函数的方法。包括直接在HTML body标签中调用、通过JavaScript语句调用及自定义函数等多种方式，并强调了onload事件的调用逻辑。

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

window.onload同时执行多个函数的解决方法

这个老问题了，也是JavaScript中很多时候都要用到的。现在就把解决方案给总结一下。

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事件只有一次。

下面的例子可以说明问题

HTML代码

代码运行后，只显示出2，而f1函数却未运行，因为对onload绑定了两次，后面的把前面的给覆盖了。

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript"> function f1(){alert(1)} function f2(){alert(2)} function f3(){alert(3)} function f4(){alert(4)} 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> <title>文字轮换效果</title> </head> <body onload="f3()"> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]