php 动态 加载css,原生JS如何动态加载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;

}

}

}

相关推荐：

以上就是原生JS如何动态加载JS和CSS文件以及代码脚本的详细内容，更多请关注php中文网其它相关文章！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！