0%

javascript动态添加脚本文件

动态加载Javascript脚本文件,可以更好的提高Javascript的读取效率
在不影响DOM的情况下,我们可以将一部分js文件动态加载,使页面响应更快速,
下面的代码可以作为动态加载进行使用,

利用自定义函数加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function loadScript(url, callback){
var script = document.createElement("script"); //创建script标签
script.type="text/javascript";

//执行后提示,可以不用填写
script.onload = function(){
callback();
}

script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}

loadScript("js/script1.js", function(){
alert("Loaded!");
})

利用XMLHttpRequest脚本注入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const xhr = new XMLHttpRequest();
xhr.open("get", "js/script1.js", true); //使用open方法,GET 相应的js脚本文件
xhr.onreadystatechange = function(){
//使用onreadystatechange检查readystate状态是否为4,检测http状态码是不是2XX的有效相应额,还是304缓存读取相应。
if(xhr.readyState == 4){
if(xhr.status >=200 && xhr.status < 300 || xhr.status == 304){
let script = document.createElement("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
};
xhr.send(null);