国精品人妻无码一区二区三区牛牛 ,麻花豆传媒mv在线观看网站,在线播放无码高潮的视频,中文字幕亚洲色妞精品天堂

DIV里如何動(dòng)態(tài)加載js和css的jquery plugin

2016/8/25 9:11:20   閱讀：1648    發(fā)布者：1648
一個(gè)簡(jiǎn)單的動(dòng)態(tài)加載js和css的jquery代碼，用于在生成頁(yè)面時(shí)通過(guò)js函數(shù)加載一些共通的js和css文件。 
  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 < files.length; 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 + attr + link + "></" + 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’);  

將該函數(shù)寫入一個(gè)common.js文件中，在html中加載該common.js文件，就可以達(dá)到目的。該js函數(shù)出自以下鏈接： 
http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html 
注意： 
1.在html5中，<script>標(biāo)簽已經(jīng)不支持language屬性了，所以我刪除了： 
  1. var attr = isCSS ? " type=’text/css’ rel=’stylesheet’ " : " language=’javascript’ type=’text/javascript’ ";  

中的language=’javascript’ 
2.原作者在寫入js和css標(biāo)簽時(shí)，用的是： 
Java代碼  
  1. document.write("<" + tag + attr + link + "></" + tag + ">");  

但是經(jīng)過(guò)實(shí)踐，發(fā)現(xiàn)document.write（）方法會(huì)在寫入前清除原頁(yè)面的所有內(nèi)容，也就相當(dāng)于覆蓋的意思，
這樣明顯達(dá)不到我的需要，我需要在加載頁(yè)面時(shí)動(dòng)態(tài)的向頁(yè)面導(dǎo)入共通的js和css，
而不能清除我原頁(yè)面的其他任何內(nèi)容，所以查了下api，我改用了： 
Java代碼  
  1. $("head").prepend("<" + tag + attr + link + "></" + tag + ">");  

這個(gè)方法，$("head").prepend（）方法的作用是在<head>標(biāo)簽的最前端追加寫入內(nèi)容。 

最后，再補(bǔ)充一個(gè)方法，也是通過(guò)共通js來(lái)實(shí)現(xiàn)，應(yīng)該比上面這個(gè)方法更容易理解： 
  1. Dynamically loading external JavaScript and CSS files   
  2.   
  3. 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, 
  4. assign it the appropriate attributes, and finally, use element.appendChild() 
  5. to add the element to the desired location within the document tree.
  6.  It sounds a lot more fancy than it really is. Lets see how it all comes together:   
  7.   
  8. function loadjscssfile(filename, filetype){   
  9. if (filetype=="js"){ //if filename is a external JavaScript file   
  10.   var fileref=document.createElement(’script’)   
  11.   fileref.setAttribute("type","text/javascript")   
  12.   fileref.setAttribute("src", filename)   
  13. }   
  14. else if (filetype=="css"){ //if filename is an external CSS file   
  15.   var fileref=document.createElement("link")   
  16.   fileref.setAttribute("rel", "stylesheet")   
  17.   fileref.setAttribute("type", "text/css")   
  18.   fileref.setAttribute("href", filename)   
  19. }   
  20. if (typeof fileref!="undefined")   
  21.   document.getElementsByTagName("head")[0].appendChild(fileref)   
  22. }   
  23.   
  24. loadjscssfile("myscript.js", "js") //dynamically load and add this .js file   
  25. loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file   
  26. loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file   

【 微信掃一掃 】

文章分類

相關(guān)新聞

熱門標(biāo)簽