99资源 在线视频|美女人妻自慰淫叫|日韩欧美乱伦电影|超碰按摩国产超碰|av全球免费不卡|加勒比无码一区人妻|国产高清一区视频高清|一区二区三区精品伊人|无码加勒比人妻高清|久草中文在线一区蜜乳

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

2016/8/25 9:11:20   閱讀：1617    發(fā)布者：1617
一個(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ù)寫(xiě)入一個(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.原作者在寫(xiě)入js和css標(biāo)簽時(shí)，用的是： 
Java代碼  
  1. document.write("<" + tag + attr + link + "></" + tag + ">");  

但是經(jīng)過(guò)實(shí)踐，發(fā)現(xiàn)document.write（）方法會(huì)在寫(xiě)入前清除原頁(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)簽的最前端追加寫(xiě)入內(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)簽