>  기사  >  웹 프론트엔드  >  动态加载js和css的jquery plugin_html/css_WEB-ITnose

动态加载js和css的jquery plugin_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:58:52965검색

一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件。 

Java代码  

  1. //how to use the function below:  
  2. //$.include('file/ajaxa.js');$.include('file/ajaxa.css');  
  3. //or $.includePath  = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the same directory)  
  4. $.extend({  
  5.     includePath: '',  
  6.     include: function(file)  
  7.     {  
  8.         var files = typeof file == "string" ? [file] : file;  
  9.         for (var i = 0; i 
  10.         {  
  11.             var name = files[i].replace(/^\s|\s$/g, "");  
  12.             var att = name.split('.');  
  13.             var ext = att[att.length - 1].toLowerCase();  
  14.             var isCSS = ext == "css";  
  15.             var tag = isCSS ? "link" : "script";  
  16.             var attr = isCSS ? " type='text/css' rel='stylesheet' " : " type='text/javascript' ";  
  17.             var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";  
  18.             if ($(tag + "[" + link + "]").length == 0) $("head").prepend("" + tag + ">");  
  19.         }  
  20.     }  
  21. });  
  22. $.include('../js/jquery-ui-1.8.21.custom.min.js');  
  23. $.include('../css/black-tie/jquery-ui-1.8.21.custom.css');  

将该函数写入一个common.js文件中,在html中加载该common.js文件,就可以达到目的。该js函数出自以下链接: 
http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html 
注意: 
1.在html5中,<script>标签已经不支持language属性了,所以我删除了: <br /> <p class="sycode"> <p class="sycode"> <p class="sycode"> Java代码 <ol> <li>var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' "; <br />中的language='javascript' <br />2.原作者在写入js和css标签时,用的是: <br /> <p class="sycode"> <p class="sycode"> <p class="sycode"> Java代码 <ol> <li>document.write("<" + tag + attr + link + "></" + tag + ">"); <br />但是经过实践,发现document.write()方法会在写入前清除原页面的所有内容,也就相当于覆盖的意思,这样明显达不到我的需要,我需要在加载页面时动态的向页面导入共通的js和css,而不能清除我原页面的其他任何内容,所以查了下api,我改用了: <br /> <p class="sycode"> <p class="sycode"> <p class="sycode"> Java代码 <ol> <li>$("head").prepend("<" + tag + attr + link + "></" + tag + ">"); <br />这个方法,$("head").prepend()方法的作用是在<head>标签的最前端追加写入内容。 <br /> <br />最后,再补充一个方法,也是通过共通js来实现,应该比上面这个方法更容易理解: <br /> <p class="sycode"> <p class="sycode"> <p class="sycode"> Java代码 <ol> <li>Dynamically loading external JavaScript and CSS files <li> <li>To load a .js or .css file dynamically, in a nutshell, it means using DOM methods to first create a swanky new "SCRIPT" or "LINK" element, assign it the appropriate attributes, and finally, use element.appendChild() to add the element to the desired location within the document tree. It sounds a lot more fancy than it really is. Lets see how it all comes together: <li> <li>function loadjscssfile(filename, filetype){ <li>if (filetype=="js"){ //if filename is a external JavaScript file <li> var fileref=document.createElement('script') <li> fileref.setAttribute("type","text/javascript") <li> fileref.setAttribute("src", filename) <li>} <li>else if (filetype=="css"){ //if filename is an external CSS file <li> var fileref=document.createElement("link") <li> fileref.setAttribute("rel", "stylesheet") <li> fileref.setAttribute("type", "text/css") <li> fileref.setAttribute("href", filename) <li>} <li>if (typeof fileref!="undefined") <li> document.getElementsByTagName("head")[0].appendChild(fileref) <li>} <li> <li>loadjscssfile("myscript.js", "js") //dynamically load and add this .js file <li>loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file <li>loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file <li> <p class="sycode"> <p class="sycode"> <p class="sycode"> <p class="sycode"> <p class="sycode"> <p class="sycode"> <p class="sycode"> <p class="sycode"> <p class="sycode"> </script>
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.