js动态载入css文件,原生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);

},

// 使用

loadCSSText: function(cssText){

var style = document.createElement(‘style‘);

style.type = ‘text/css‘;

try{

// Firefox,Safari,Chrome,Opera支持

style.appendChild(document.createTextNode(cssText));

} catch(ex){

// IE早期浏览器，需要使用style元素的styleSheet属性的cssText属性

style.styleSheet.cssText = cssText;

}

}

}

本文转载于猿2048:原生JS动态加载JS、CSS文件及代码脚本

原文链接：https://www.cnblogs.com/homehtml/p/13028049.html

本文来自网络，不代表手讯网立场。