这篇文章给大家介绍的内容是关于原生js如何动态加载js和css文件以及代码脚本，有着一定的参考价值，有需要的朋友可以参考一下。
DOM readyState属性共5中状态
uninitialized：初始状态loading：document加载中loaded: document加载完成-
interactive：已加载并可与用户交互，但还需要加载图片等其他资源立即学习“前端免费学习笔记（深入）”；
complete：全部资源加载完成
DOM文档加载顺序：
解析HTML结构
加载外部脚本和样式表文件(loading)
解析并执行脚本
DOM树构建完成（readyState：interactive）
加载外部资源文件（图片等）
页面加载完成（readyState：complete）
动态加载公共方法
var DynamciLoadUtil = {
// 动态加载外部js文件，并执行回调
loadJS: function(url, callback){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
if(typeof callback == 'function'){
script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState == 'loaded'
|| this.readyState == 'complete'){
callback();
script.onload = script.onreadystatechange = null;
}
}
}
document.body.appendChild(script);
//document.getElementsByTagName('body')[0].appendChild(script);
},
// 行内方式动态加载js代码
loadJSText: function(jsText){
var script = document.createElement('script');
script.type = 'text/javascript';
try {
// Firefox,Safari,Chrome,Opera支持
script.appendChild(document.createTextNode(jsText));
} catch(ex){
// IE早期的浏览器，需要使用script的text属性来指定js代码
script.text = jsText;
}
document.body.appendChild(script);
},
// 动态加载外部CSS文件
loadCSS:function(url){
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.url = url;
document.getElementsByTagName('head')[0].appendChild(link);
},
// 使用