Rumah > php教程 > php手册 > 动态加载 js css的类

动态加载 js css的类

WBOY
Lepaskan: 2016-06-07 11:43:06
asal
1258 orang telah melayarinya

一个动态加载 js 和 css 的类
虽然很少用,但是还是用到了
自己改的/**<br>  * YLoader<br>  * 动态加载 js css <br>  * 用法<br>  *<br>  *  var yLoader = new YLoader();<br>  *<br>  *  1. 动态加载js<br>  *    yLoader.use('http://xxx.com/static/js/jquery.js');<br>  *  2. 动态加载js后执行方法<br>  *    yLoader.use('http://xxx.com/static/js/jquery.js', function(){...});<br>  *  3. 动态加载css<br>  *    yLoader.use('http://xxx.com/static/css/home.css');<br>  */<br> function YLoader() {<br>     this.doc = document;<br>     this.IS_CSS_REG = /\.css(?:\?|$)/i;<br>     this.READY_STATE_REG = /^(?:loaded|complete|undefined)$/;<br>     <br>     // bug fix<br>     // `onload` event is not supported in WebKit      // ref:<br>     //  - https://bugs.webkit.org/show_activity.cgi?id=38995<br>     //  - https://bugzilla.mozilla.org/show_bug.cgi?id=185236<br>     //  - https://developer.mozilla.org/en/HTML/Element/link#Stylesheet_load_events<br>     this.isOldWebKit = (window.navigator.userAgent.replace(/.*AppleWebKit\/(\d+)\..*/, "$1")) * 1      // For some cache cases in IE 6-8, the script executes IMMEDIATELY after<br>     // the end of the insert execution, so use `currentlyAddingScript` to<br>     // hold current node<br>     this.currentlyAddingScript = '';<br>     this.head = this.doc.getElementsByTagName('head')[0];<br>     // ref: #185 & http://dev.jquery.com/ticket/2709<br>     this.baseElement = this.head.getElementsByTagName("base")[0];<br> }<br> YLoader.prototype = {<br>     constructor : YLoader<br>     ,isFunction : function(fn) {<br>         return "[object Function]" === Object.prototype.toString.call(fn);<br>     }<br>     ,pollCss : function(node, callback) {<br>         var _self = this;<br>         var sheet = node.sheet;<br>         var isLoaded = false;<br>         <br>         // for WebKit          if(_self.isOldWebKit) {<br>             if(sheet) {<br>                 isLoaded = true;<br>             }<br>         } else {<br>             if (sheet) {  // for Firefox                  try {<br>                     if(sheet.cssRules) {<br>                         isLoaded = true;<br>                     }<br>                 } catch (ex) {<br>                     // The value of `ex.name` is changed from "NS_ERROR_DOM_SECURITY_ERR"<br>                     // to "SecurityError" since Firefox 13.0. But Firefox is less than 9.0<br>                     // in here, So it is ok to just rely on "NS_ERROR_DOM_SECURITY_ERR"<br>                     if(ex.name === "NS_ERROR_DOM_SECURITY_ERR") {<br>                         isLoaded = true;<br>                     }<br>                 }<br>             }<br>         }<br>         <br>         setTimeout(function() {<br>             if (isLoaded) {<br>                 // Place callback here to give time for style rendering<br>                 _self.isFunction(callback) && callback();<br>             } else {<br>                 _self.pollCss(node, callback);<br>             }<br>         }, 50);<br>     }<br>     ,addOnload : function(node, callback, isCss) {<br>         var _self = this;<br>         var missingOnload = isCss && (_self.isOldWebKit || !("onload" in node));<br>         // for Old WebKit and Old Firefox<br>         if(missingOnload) {<br>             setTimeout(function() {<br>                 _self.pollCss(node, callback);<br>             }, 10);  // Begin after node insertion<br>             return;<br>         }<br> <br>         node.onload = node.onerror = node.onreadystatechange = function() {<br>             if(_self.READY_STATE_REG.test(node.readyState)) {<br>                 // Ensure only run once and handle memory leak in IE<br>                 node.onload = node.onerror = node.onreadystatechange = null;<br>                 // Remove the script to reduce memory leak<br>                 if(!isCss) {<br>                     _self.head.removeChild(node);<br>                 }<br>                 // Dereference the node<br>                 node = null;<br>                 _self.isFunction(callback) && callback();<br>             }<br>         };<br>     }<br>     ,use : function(url, callback, charset) {<br>         var isCss = this.IS_CSS_REG.test(url);<br>         var node = this.doc.createElement(isCss ? "link" : "script");<br>         if(undefined != charset) {<br>             node.charset = charset;<br>         }<br>         this.addOnload(node, callback, isCss);<br>         if (isCss) {<br>             node.rel = "stylesheet";<br>             node.href = url;<br>         } else {<br>             node.async = true;<br>             node.src = url;<br>         }<br>         this.currentlyAddingScript = node;<br> <br>         // ref: #185 & http://dev.jquery.com/ticket/2709<br>         this.baseElement ?<br>             this.head.insertBefore(node, this.baseElement) :<br>             this.head.appendChild(node);<br> <br>         this.currentlyAddingScript = null;<br>     }<br> };

附件 YLoader.js.rar ( 1.64 KB 下载:20 次 )

AD:真正免费,域名+虚机+企业邮箱=0元

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan