Dynamic Loading of js and css jquery plugin and jqueryplugin

Dynamic Loading of js and css jquery plugin and jqueryplugin

A simple jquery code that dynamically loads js and css. It is used to load common js and css files through js functions when a page is generated.

Java code

1. // How to use the function below:
2. // $. Include ('file/ajaxa. js'); $. include ('file/ajaxa.css ');
3. // Or $. Your depath = 'file/'your images .your de('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 ');

Write the function into a common. js file and load the common. js file in html. The js function comes from the following link:
Http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html
Note:
1. In html5, the <script> tag does not 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'
2. When writing js and css labels, the original author uses:

Java code

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

However, after practice, we found that document. the write () method clears all the content of the original page before writing, which is equivalent to overwriting, which obviously does not meet my needs, I need to dynamically import common js and css to the page when loading the page, but cannot clear any other content on my original page. So I checked the api and switched:

Java code

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

In this method, $ ("head"). prepend () is used to Append content to the front end of the
Finally, we can 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. 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

How to dynamically load external CSS and JS files

(Function (){
Xe = window. xe | | {};
Xe. load = {
FilesAdded :{},
LoadScript: function (src ){
If (this. filesAdded [src]) {
Return 0;
}
Var script = document. createElement ('script ');
Script. type = 'text/javascript ';
Script. src = src;
This. filesAdded [src] = true;
Document. body. appendChild (script );
},
LoadScriptString: function (code ){
Var script = document. createElement ('script ');
Script. type = 'text/javascript ';
Try {
Script. appendChild (document. createTextNode (code ));
} Catch (ex ){
Script. text = code;
}
Document. body. appendChild (script );
},
LoadCss: function (href ){
If (this. filesAdded [href]) {
Return 0;
}
Var link = document. createElement ('link ');
Link. type = 'text/css ';
Link. rel = 'stylesheet ';
Link. href = href;
This. filesAdded [href] = true;
Document. getElementsByTagName ('head') [0]. appendChild (link );
},
LoadCssString: function (code ){
Var style = document. createElement ('style ');
Style. type = 'text/css ';
Try {
Style. appendChild (document. createTextNode (code ));
... The remaining full text>

How to dynamically load js Code through jQuery on a webpage

Do you want to dynamically load the code in another js file?
In this case, you can choose to use the ajax Method for loading,
However, dataType must be set to script.
Then you can execute the corresponding code.