原生js中如果有多个onload事件解决方案

在一个页面中有两个JavaScript 分别都用到了window.onload

一个是:window.onload=func1，另一个是:window.onload=func2 这样就造成了一个JavaScript 运行不了。

方案一：

window.onload=function(){func1();func2();}

方案二：

用window.attachEvent和 window.addEventListener来解决问题了

window.addEventListener("load",调用函数名,false);//对于FireFox

window.attachEvent("onload",调用函数名)//对于IE

方案三

function addLoadEvent(func){

    var oldonload = window.onload; //把现在有window.onload事件处理函数的值存入变量oldonload。

    if(typeof window.onload != 'function'){ //如果这个处理函数还没有绑定任何函数，就像平时那样把新函数添加给它

        window.onload = func;

    }else{ //如果在这个处理函数上已经绑定了一些函数。就把新函数追加到现有指令的末尾

        window.onload = function(){

            oldonload();

            func();

        }

    }  

}

addLoadEvent(num1);

addLoadEvent(num2);

如果有人接下来的js写了一个加载事件：

window.onload = function(){ console.log('最后再来个页面加载函数')}

结果妥妥的被覆盖了，只会执行最后一个window.load的内容，因此方案三不可取

推荐使用现代浏览器事件绑定方案二。

巴特西

原生js中如果有多个onload事件解决方案

最新文章

热门文章