常用的动态加载js文件有以下几种方式:
1.直接document.write
document.write("<script src='test.js'><\/script>");
2.动态创建script元素
var loadJS = function(jsUrl){
var _doc = document.getElementsByTagName('head').item(0),
script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',jsUrl);
_doc.appendChild(script);
};
loadJS("https://cdn.bootcss.com/angular.js/1.6.6/angular.js");
3.预留一个script标签,然后动态改变src
这几种方法都是异步执行的,也就是说,在加载这些脚本的同时,主页面的脚本继续运行,如果用以上的方法,那下面的代码将得不到预期的效果。
比如现在需要动态加载a.js,并拿到其中的str的值,a.js如下:
var str = "我是str的值";
console.log("我是a.js中的:"+str)
主页面js:
//loadJS()略
loadJS("a.js");
console.log( "主页面动态加载a.js并取其中的变量:" + str );
上述代码执行后a.js中的console执行并输出正确内容,但是主页面的console产生了错误,原因是str is not defined,为什么呢?因为主页面在取str的时候a.js并没有完全加载成功。在有些情况下就需要等待a.js加载完成后才能进一步的操作,所以可以使用下面的方法来解决:
var dynamicLoad = function(jsUrl,fn){
var _doc = document.getElementsByTagName('head')[0],
script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',jsUrl);
_doc.appendChild(script);
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
fn();
}
script.onload = script.onreadystatechange = null;
}
};
dynamicLoad('a.js',function(){
console.log("加载完成啦!!!"+str);
});