最近做到一个需求只能通过外部CDN引入JS资源,但是url上有个参数需要单独提取出来动态修改,这时我就需要动态加载该标签了,但是遇到了另一个问题就是动态加载的标签是异步加载的,不一定会等到该标签加载完后再加载下一个script标签
解决方法:
使用script.onload方法,另外如果遇到需要兼容ie还可以使用另一个方式 script.readyState
理论上script有五个状态值
uninitialized
loading
loaded
interactive
complete
在ie6/7是有一定几率只会出现complete 或者 loaded
所以兼容ie稳妥的方式就是 script.readyState == 'complete || script.readyState == 'loaded'
最后封装函数如下:
function loadScript(url,callback=()=>{}){
const script = document.createElement('script');
const body = document.body;
script.type = 'text/javascript';
script.src = 'url';
body.appendChild(script);
if(script.readyState) {
script.onreadystatechange = function(){
if(script.readyState == 'complete' || script.readyState == 'loaded'){
callback();
}
}
}else{
script.onload = function(){
callback()
}
}
}