Dynamically loading JS and CSS for jquery plugin

A simple jquery code that dynamically loads JS and CSS to load common JS and CSS files using the JS function when generating a page.

Java code

2. How to use the function below:
4. $.include (' file/ajaxa.js '); $.include (' file/ajaxa.css ');
6. or $.includepath = ' file/'; $.include ([' Ajaxa.js ', ' ajaxa.css ']);(only if. js and. css files is in the same directory)
8. $.extend ({
10. Includepath: ",
12. Include:function (file)
14. {
16. var files = typeof File = = "string"?  [File]: file;
18. For (var i = 0; i < files.length; i++)
20. {
22. var name = Files[i].replace (/^\s|\s$/g, "");
24. var att = name.split ('. ');
26. var ext = att[att.length- 1].tolowercase ();
28. var Iscss = ext = = "CSS";
30. var tag = iscss?  " link": "script";
32. var attr = iscss?  "type= ' text/css ' rel= ' stylesheet '": "type= ' Text/javascript '";
34. var link = (iscss?)  "href": "src") + "= '" + $.includepath + name + "'";
36. if ($ (tag + "[" + link + "]"). Length = = 0) $ ("Head"). Prepend ("<" + tag + attr + link + "  ; </"+ tag + " > ");
38. }
40. }
42. });
44. $.include ('..  /js/jquery-ui-1.8.21.custom.min.js ');
46. $.include ('..  /css/black-tie/jquery-ui-1.8.21.custom.css ');

Write the function into a common.js file and load the Common.js file in HTML to achieve the purpose. The JS function is derived from the following link:
Http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html
Attention:
1. The,<script> tag in HTML5 does not already support the language attribute, so I deleted it:

Java code

1. var attr = iscss?  "type= ' text/css ' rel= ' stylesheet '": "language= ' javascript ' type= ' Text/javascript '";

Language= ' JavaScript ' in the
2. When writing JS and CSS tags, the original author uses:

Java code

1. document.write ("<" + tag + attr + link + "></" + tag + ">");

But through practice, found that the document.write () method will erase all the contents of the original page before writing, it is equivalent to the meaning of the overwrite, this obviously does not reach my needs, I need to load the page dynamically to the page to import common JS and CSS, and not to clear my original page of any other content, so check the next API, I use:

Java code

1. $ ("Head"). Prepend ("<" + tag + attr + link + "></" + tag + ">");

This method, $ ("head"). The function of the prepend () method is to append the content to the front of the
Finally, to add a method, but also by common JS to achieve, should be more easily understood than the above method:

Java code

2. Dynamically loading external JavaScript and CSS files
6. To load a. js or. css file dynamically, in a nutshell, it means using the DOM methods to first create a swanky new "SC Ript "or " LINK "element, assign it the appropriate attributes, and Finally, use Element.appendchild () to add the E Lement 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:
10. function loadjscssfile (filename, filetype) {
12. if (filetype=="JS") { //if filename is a external JavaScript file
14. var fileref=document.createelement (' script ')
16. Fileref.setattribute ("type","Text/javascript")
18. Fileref.setattribute ("src", filename)
20. }
22. else if (filetype=="css") { //if filename is an external CSS file
24. var fileref=document.createelement ("link")
26. Fileref.setattribute ("rel", "stylesheet")
28. Fileref.setattribute ("type", "Text/css")
30. Fileref.setattribute ("href", filename)
32. }
34. if (typeof fileref!="undefined")
36. document.getElementsByTagName ("Head") [0].appendchild (fileref)
38. }
42. Loadjscssfile ("Myscript.js", "JS") //dynamically load and add this. js file
44. Loadjscssfile ("javascript.php", "JS") //dynamically Load "javascript.php" as a JavaScript file
46. Loadjscssfile ("Mystyle.css", "CSS") ////dynamically load and add this. css file

Dynamically loading JS and CSS for jquery plugin