动态加载script标签

 

/**
 * HTML动态加载js
 * @path {String} src地址必须带有后缀名.js
 * @callback {Function} 加载成功的回掉函数
 * */
var cache=[];
function addJs(path,callback){
    var flag=0;//检查是否加载的状态
    for(var i=cache.length;i--;){
        cache[i]==path?flag=1:flag=0;
    }
    if(flag){//如果已经加载则不加载    
        return;
    }
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = path;
    script.type = 'text/javascript';
    head.appendChild(script);
    script.onload = script.onreadystatechange = function() {/*判断是否加载成功*/
    if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) {
        script.onload = script.onreadystatechange = null;
            callback(); 
        }
    };
    cache.push(path);//把加载过的存起来
}

上面提到了readyState属性，下面我们来简单了解一下这个属性

<script>元素有一个readyState属性，它的值随着下载外部文件的过程而改变。readyState 有五种取值：

• uninitialized: 默认状态
• loading: 下载开始
• loaded: 下载完成
• interactive: 下载完成但尚不可用
• complete: 所有数据已经准备好

需要注意的是：微软文档上说，在<script>元素的生命周期中，readyState 的这些取值不一定全部出现，但并没有指出哪些取值总会被用到。