一个页面中多个window.onload = function(){}冲突问题解决思路

今天在做前台页面的时候，应用了两个网上找到的JS效果，其中一个效果不起作用，FF下也没有报错，运用排除法发现是window.onload = function(){...}重复造成冲突，Google了一下，遇到这个问题的人还不少，通过查找资料和自己的实践验证，提供思路如下：

比如在一个页面中有两个JavaScript 分别都用到了window.onload
一个是:window.onload=function(a){...}，另一个是:window.onload=function(b){...}这样就造成了一个JavaScript 运行不了(一般是前一个)。

写成这样就可以了

window.onload=function(){function(a);function(b);} 

也就是集中window.onload一次。

还有一种方法，举个例子

<script type="text/javascript">    
function $(obj){return document.getElementById(obj);}    
window.onload=function(){    
   alert("加载完成");    
   onload2();    
   onload3();    
}    
function onload2(){    
   $("aa").onclick=function dd(){alert("haha")};    
}    
function onload3(){    
   alert("加载完成");    
}</script>    
<button id="aa">试试</button>  

PS：window.onload = function(){}的作用？

这是匿名函数的写法,就相当于window得onload事件调用了一个方法，但是这个方法是匿名的(因为没有其他地方会调用，所以没必要给一个名字)
如果要以常规的写法，就是定义一个函数比如bbb();
function bbb()
{ aaa();}
再window.onload = bbb();
这样比较冗长

 

见过书上有这样写个函数:
function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!='function'){
        window.onload=func;
    }else{
        window.onload=function(){
            oldonload();
            func();
        }
    }
}

添加要加载执行的事件:
addLoadEvent(aaa);
addLoadEvent(bbb);