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


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

1.最简单的调用方式
直接写到html的body标签里面,如下示例:
 程序代码<html>
   <body οnlοad="function()">
   </body>
</html>

2.在JavaScript语句里调用
 程序代码<script>
function f1(){...}
window.οnlοad=f1;
</script>

3.同时调用多个函数(body方式)
 程序代码<html>
   <body οnlοad="function1();function2();function3();">
   </body>
</html>

4.在JavaScript语句中同时调用多个函数
 程序代码<script>
function f1(){...}
function f2(){...}
function f3(){...}
function f4(){...}
window.οnlοad=function(){
f1();
f2();
f3();
f4();
}
</script>

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


5.自定义函数式多次调用
 程序代码<script>
function f1(){...}
function f2(){...}
function f3(){...}
function f4(){...}
//onload事件侦听函数
function addLoadEvent(func){
var oldοnlοad=window.onload;
if(typeof window.onload!="function"){window.οnlοad=func;}else{window.οnlοad=function(){oldonload();func();}};
}
//调用方式
addLoadEvent(f1);
addLoadEvent(f2);
addLoadEvent(f3);
addLoadEvent(f4);
</script>
这种方式调用比较方便,逻辑清晰。

但要注意的问题是,不可以同时混合运用两种调用方式,因为onload事件只有一次。
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值