综合一区-免费污视频-天天操综合网-又黄又爽的网站-日韩中文字幕一区二区三区-狠狠操狠狠-风间由美一区-自拍色图-久草热在线-椎名空在线-亚洲av无码国产精品久久-夜夜se-成人涩涩软件-国产精品第-亚洲自拍中文字幕-久草视频中文在线-日本黄页网站免费大全-双性人做受视频-中国一级免费毛片-三级黄片毛片

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

2016/8/25 9:11:20   閱讀：1830    發(fā)布者：1830
一個簡單的動態(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>標(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)簽時，用的是： 
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>標(biāo)簽的最前端追加寫入內(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)新聞

熱門標(biāo)簽