這篇文章要跟大家介紹的內容是關於原生JS如何動態載入JS和CSS檔案以及程式碼腳本,有著一定的參考價值,有需要的朋友可以參考一下。
#uninitialized
:初始狀態
#loading
:document載入中
#loaded
: document載入完成
:全部資源載入完成
解析並執行腳本
#DOM樹建置完成(readyState:interactive)
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如何動態載入JS和CSS檔案以及程式碼腳本的詳細內容。更多資訊請關注PHP中文網其他相關文章!