javascript 异步加载

Posted 2021-03-04 homehtml

javascript 异步加载

背景：公司使用新的统计埋点，由于弹层出现地方较多，新埋点方法未能及时压入common.js 所以需要自己引入阿里云上的埋点文件

问题1：在代码里输入

<script src="xxxx/xx.js"></script>`

后台直出到页面上==script==并未去请求js，导致代码报错

问题2：动态==异步==添加到dom中

由于是 异步的 导致 js 还没加载完 下面的埋点调用就开始执行了 js报onloginit undefind

解决方法

;
(function() {
    /**
     * 动态加载js文件
     * @param  {string}   url      js文件的url地址
     * @param  {Function} callback 加载完成后的回调函数
     */
    var _getScript = function(url, callback) {
        var head = document.getElementsByTagName(‘head‘)[0],
            js = document.createElement(‘script‘);

        js.setAttribute(‘type‘, ‘text/javascript‘); 
        js.setAttribute(‘src‘, url); 

        head.appendChild(js);

        //执行回调
        var callbackFn = function(){
                if(typeof callback === ‘function‘){
                    callback();
                }
            };

        if (document.all) { //IE
            js.onreadystatechange = function() {
                if (js.readyState == ‘loaded‘ || js.readyState == ‘complete‘) {
                    callbackFn();
                }
            }
        } else {
            js.onload = function() {
                callbackFn();
            }
        }
    }

    //如果使用的是zepto，就添加扩展函数
    if(Zepto){
        $.getScript = _getScript;
    }
    
})();

在js加载完触发回调 里执行

js.onload = function callback() {}