js window.onload 加载多个函数以及追加函数的方法介绍

发布时间:2019-07-14编辑:脚本学堂
如何使用js中的windows.onload加载多个函数,又如何追加函数呢?请参考本文中的详细介绍吧,希望对大家有所帮助吧。

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。

解决方法1:
 

复制代码 代码示例:
window.onload =function() { t();  b(); }

解决方法2:
 

复制代码 代码示例:
function addLoadEvent(func) {
  var oldonload = window.onload;//得到上一个onload事件的函数
  if (typeof window.onload != 'function') {//判断类型是否为'function',注意typeof返回的是字符串
    window.onload = func;
  } else { 
    window.onload = function() {
      oldonload();//调用之前覆盖的onload事件的函数---->由于我对js了解不多,这里我暂时理解为通过覆盖onload事件的函数来实现加载多个函数
      func();//调用当前事件函数
    }
  }
}

1、完整示例:
 

复制代码 代码示例:

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 更professional,各取所好吧!

JS window.onload追加函数:
 

复制代码 代码示例:
<script>
if(window.attachEvent)//IE:如果浏览器中存在window.attachEvent函数则使用window.attachEvent函数,判断是否是IE还可以使用:if (document.all){//..}
window.attachEvent("onload",function() {alert("add method");});
else  //FireFox
window.addEventListener("load",function() {alert("add method");},true);
</script>

运行,js中alert弹出消息,问题解决。