动态加载JavaScript文件的3种方式
编程学习 2021-07-04 16:45www.dzhlxh.cn编程入门
第一种是使用document.write/writeln(）方式，第二种使用jQuery，第三种是使用原生js方法，感兴趣的小伙伴们可以参考一下
以下是遇到的几种动态加载JavaScript文件的方式，持续更新中。。。
一、使用document.write/writeln(）方式
该种方式可以实现js文件的动态加载，原理就是在重写文档流，这种方式会导致整个页面重绘。
实现方式:
代码如下:
document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");
需要注意的是特殊字符的转义。
二、使用jQuery
使用getScript(url,callback)方法实现动态加载js文件
$.getScript('test.js',function(){
alert('done');
});
三、使用原生js方法
原理：动态创建script标签，并指定script的src属性
function loadJs(url,callback){
var script=document.createElement('script');
script.type="text/javascript";
if(typeof(callback)!="undefined"){
if(script.readyState){
script.onreadystatechange=function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange=null;
callback();
}
}
}else{
script.onload=function(){
callback();
}
}
}
script.src=url;
document.body.appendChild(script);
}
loadJs("test.js",function(){
alert('done');
});
还可以使用同样的原理动态加载css文件，只不过插入的的父节点是head标签。
以上就是动态加载JavaScript文件的方法，希望对大家的学习有所帮助。
上一篇：Vue三层嵌套路由的示例代码
下一篇：Node.js的Koa实现JWT用户认证方法