在页面加载完后执行javascript代码

转载地址：there

最近在写javascript100插件时，遇到网友提的一个问题，代码必须放在body结束标签之后才能正常执行，放在head标签里面就会报错了。
想了下原因，因为我写的这个javascript100插件中操作了页面的DOM元素，假如放在head之间，因为页面DOM还没开始渲染，所以会报错

为了让插件更加人性化，我还是想改进下这个缺陷，就必须让代码在页面加载完后执行JS代码

在网上搜索了下，让JS代码在页面加载完后执行有很多方法，我就一一列出来下
方法1：

    <script defer="defer" language="javascript"></script>
    //或者
    <script defer language="javascript"></script>

但这种方法只有IE支持，其他浏览器不识别defer 这种方法不靠谱

方法2： 把js代码放在</body>结束标签之后， 因为浏览器代码渲染是从上至下的，这种方法是最傻瓜的，兼容所有浏览器

方法3： 利用document.onreadystatechange事件

    
    
if(document.readyState=="complete"){
   //js代码
 }

不过这种方法，也有缺点有的浏览器在readStates等于loaded时就完了，不会跳到complete状态，而且早期的火狐等浏览器不支持这个事件，单纯的用这种方法不靠谱

方法4：
利用window.onload事件

    
    
window.onload=function(){
    funA();
}

但这个方法在IE中只能在一个地方调用，假如2个地方调用，后面调用的就会把前面的添加的覆盖掉；

    
    
window.onload=function(){
    funA();
}

window.onload=function(){
    funB();
}

如果2个地方调用，funA()在IE中就不会执行了。
所以只能把它们写在一起，

    
    
window.onload=function(){
    funA();
    funB();
}

在IE中调用还是很不方便

不过，外国的一个大牛写了一个函数，利用这个函数，我们就可以多处调用了

    var $$ = function(func){
        var oldOnload =window.onload;
        if(typeof window.onload != 'function'){
            window.onload = func;
        }else{
            window.onload = function(){
                oldOnload();
                func();
            }
        }
    }
    //调用
    $$(function(){
        //页面加载完后执行js代码
    })

我们推荐使用上面这个函数，兼容所有浏览器，最后我选择了这个方法

window.onload是使用的DOM 0 级方法，我们还可以使用DOM 2级方法给onload事件添加需要执行的代码
不过也得写一个兼容函数

    var $$ = function(func){
        if ( document.addEventListener ) {
            window.addEventListener( "load", func, false );
        }else if ( document.attachEvent ){
            window.attachEvent( "onload", func);
        }
    }
    $$(function(){
        //页面加载完后执行js代码
    })

我还看了下jQuery的源码
jQuery里面还利用现代浏览器的DOMContentLoaded事件，这个事件是等DOM加载完后，就执行代码了，而不用等整个页面加载完后执行，但IE不支持这个事件，有兴趣的朋友可以自己研究研究