Home > php教程 > php手册 > body text

动态加载 js css的类

WBOY
Release: 2016-06-07 11:43:06
Original
1193 people have browsed it

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!