Heim > php教程 > php手册 > Hauptteil

动态加载 js css的类

WBOY
Freigeben: 2016-06-07 11:43:06
Original
1236 Leute haben es durchsucht

一个动态加载 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元

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage