A simple jquery code for loading js and css dynamically, jscssjquery code

A simple jquery code for loading js and css dynamically, jscssjquery code

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.

//how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the same directory) $.extend({ includePath: '', include: function(file) { var files = typeof file == "string" ? [file] : file; for (var i = 0; i < files.length; i++) { var name = files[i].replace(/^\s|\s$/g, ""); var att = name.split('.'); var ext = att[att.length - 1].toLowerCase(); 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 + attr + link + "></" + tag + ">"); } } }); $.include('../js/jquery-ui-1.8.21.custom.min.js'); $.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.
Note:
1. In html5, the <script> tag does not support the language attribute, So I deleted it:

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:

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:

$("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:

Dynamically loading external JavaScript and CSS files 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: function loadjscssfile(filename, filetype){ if (filetype=="js"){ //if filename is a external JavaScript file var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", filename) } else if (filetype=="css"){ //if filename is an external CSS file var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", filename) } if (typeof fileref!="undefined") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //dynamically load and add this .js file loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file 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.