jquery plugin_html/css_WEB-ITnose that dynamically loads js and css

A simple jquery code for dynamically loading js and css, which is used to load some common js and css files through js functions when generating pages.

Java code

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"; 🎜>
var tag = isCSS ? "link" : "script";
var attr = isCSS ? " type='text/css' rel='stylesheet' " : " type='text/ javascript '";
var link = (iSCSS?" HREF ":" SRC ")" $ .includepath name "'";
if (tag "[" ["[" link "]").length == 0) $("head").prepend("" tag ">");
}
}
});
$.include('../js/jquery-ui-1.8.21.custom.min.js');
$.include('../css/black-tie/jquery-ui-1.8.21.custom.css');

Write this function into a common. js file, loading the common.js file in html can achieve the purpose. This js function comes from the following link:
http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html
Note:
1. In html5,

Java code

var attr = isCSS ? " type='text /css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";

language='javascript' in
2. Original When the author writes js and css tags, he uses:

Java code

document.write("" tag ">");

But after practice, I found that the document.write() method will clear all the contents of the original page before writing, which is equivalent to overwriting. This obviously does not meet my needs. I need to dynamically load the page. Importing common js and css into the page, but not clearing any other content of my original page, so I checked the api and I used:

Java code

1. $("head").prepend("" tag ">");

The function of this method, the $("head").prepend() method is to append written content to the front end of the tag.

Finally, add another method, which is also implemented through common js. It should be easier to understand than the above method:

Java code

1. Dynamically loading external JavaScript and CSS files
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, 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:
5. function loadjscssfile(filename, filetype){
6. if (filetype=="js"){ //if filename is a external JavaScript file
7. var fileref=document.createElement('script')
8. fileref.setAttribute("type","text/javascript")
9. fileref.setAttribute("src ", filename)
10. }
11. else if (filetype=="css"){ //if filename is an external CSS file
12. var fileref=document.createElement( "link")
13. fileref.setAttribute("rel", "stylesheet")
14. fileref.setAttribute("type", "text/css")
15. fileref. setAttribute("href", filename)
16. }
17. if (typeof fileref!="undefined")
18. document.getElementsByTagName("head")[0].appendChild (fileref)
19. }
21. loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
22. loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
23. loadjscssfile("mystyle.css", "css") //dynamically load and add this .css file