国产色在线视频-国产色综合一区二区三区-国产身材极品喷水 在线播放-国产深夜福利视频观看-国产深夜福利视频在线-国产深夜福利视频在线播放

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

2016/8/25 9:11:20   閱讀：1453    發(fā)布者：1453
一個簡單的動態(tài)加載js和css的jquery代碼，用于在生成頁面時通過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ù)寫入一個common.js文件中，在html中加載該common.js文件，就可以達到目的。該js函數(shù)出自以下鏈接： 
http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html 
注意： 
1.在html5中，<script>標簽已經(jīng)不支持language屬性了，所以我刪除了： 
  1. var attr = isCSS ? " type=’text/css’ rel=’stylesheet’ " : " language=’javascript’ type=’text/javascript’ ";  

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

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

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

最后，再補充一個方法，也是通過共通js來實現(xiàn)，應(yīng)該比上面這個方法更容易理解： 
  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)新聞

熱門標簽