一个页面中多个WINDOW.ONLOAD = FUNCTION(){}冲突问题解决思路

本文讨论了在网页中使用多个window.onload函数时可能导致的冲突问题,并提供了两种解决方案:将所有函数集中在一个window.onload内,或者使用addLoadEvent函数来避免冲突。

今天在做前台页面的时候,应用了两个网上找到的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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值