您好,欢迎访问一九零五行业门户网

原生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);    },    // 使用<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文件以及代码脚本的详细内容。
其它类似信息

推荐信息