h5单页面埋点问题（undefine）

最新推荐文章于 2025-05-22 10:16:45 发布

yaya1286249672

最新推荐文章于 2025-05-22 10:16:45 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： rea

本文链接：https://blog.youkuaiyun.com/yaya1286249672/article/details/81451646

rea 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在商城页面中动态加载第三方资源并确保资源完全加载后再调用回调函数的方法。通过判断资源是否存在，以及根据不同浏览器环境（如IE和其他现代浏览器）采用不同的监听方式来实现资源加载完成后的回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：商城页面里调用第三方资源埋点

代码实现（主要解决资源未加载就被调用问题）

备注：把调用函数作为参数传进去控制保证在资源加载完成后调用；

let COLLECTURL = http://collect.trc.com/index.js；

//动态创建js加载
function loadScript(url,callback,userId){
    let w = document.getElementsByClassName("collect-name")[0]; //
    if(w!=undefined){ //有collect资源
        if (w.readyState){ //IE
            w.onreadystatechange = function(){
                if (w.readyState == "loaded" || script.readyState == "complete"){
                    w.onreadystatechange = null;
                    callback(userId);
                }
            };
        } else { //Others
            w.onload = function(){
                callback(userId);
            };
        }

   }else{ //没有collect资源
        let script = document.createElement ("script");
        script.type = "text/javascript";
        script.className = "collect-name";
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
        if (script.readyState){ //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" || script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback(userId);
                }
            };
        } else { //Others
            script.onload = function(){
                callback(userId);
            };
        }
   }


}
//回调函数
function sdkUse(UserId) {
    sdk.storeUserId(UserId)
};

代码调用（因为需要需要在登录接口）

loadScript(COLLECTURL,sdkUse,data.body.userId);