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,以防止重复加载

推荐阅读更多精彩内容

  • ( 摘自高性能Javascript )文档对象模型(DOM)允许你使用JavaScript 动态创建HTML的几乎...
    jicemoon阅读 16,123评论 6 25
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 164,590评论 24 698
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,862评论 1 91
  • 湘江的水 击打着岸边 似乎要将明月击碎 靠在护栏的情侣 亲吻着 顾不上湘江的水 汽笛声和一年前一样 只不过少了只顾...
    小罪人阅读 233评论 4 14
  • 生产环境中,经常会因为系统迭代升级而修改表结构。如果遇到了对大表做添加有default值字段的操作,一定要格外注意...
    DBA阅读 1,927评论 1 6