这篇文章给大家介绍的内容是关于原生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); }, // 使用<style>标签包含嵌入式css 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实现重建二叉树的算法解析
javascript中object.defineproperty()方法的解析
以上就是原生js如何动态加载js和css文件以及代码脚本的详细内容。