Web动态加载js

很多时候在一个页面中某个操作需要用到一个js库，但这个操作也不经常用，所以并不想在该页面一开始就加载这个js库，只有当操作时才动态加载进来。

由于浏览器（DOM）对象允许javascript动态创建任何HTML内容，并自动根据链接下载内容，像<img src="..." />``<script src="...">等，所以只需向DOM中添加<script>内容就好了，关键在于怎样知道浏览器什么时候加载完js，不然我们依赖该js的代码就会出错，

Chrome/Firefox/safari/IE11 等在<script>内容加载完后会有一个load事件，我们可监听这一事来完成需要的相关操作

var script = document.createElement("script");
script.onload = function(){
    ///加载完成
}
script.src = "file.js";
document.getElementByTagName("head")[0].appendChild(script);

而IE11以下版本就不支持此事件，但会有一个readystatechange事件：

script.readystatechange = function(){
    if( script.readyState == "loaded" || script.readyState == "complete" ){
        ///加载完成
    }
}

下面来封装下，以方便调用：

function loadScript(url, callback){
    var script = document.createElement ("script")
    script.type = "text/javascript";
    if (script.readyState){ //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

现在就可以当点击时再加载所需js库，但当重复点击时，就会重复加载，所以我们还需要一个变量记录已动态加载的js，以防止重复加载

Web动态加载js

推荐阅读更多精彩内容