A simple dynamic loading of JS and CSS jquery code, used to generate the page through the JS function to load some common JS and CSS files.
//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 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 ');
The function is written to a common.js file, and the Common.js file is loaded in HTML to achieve the purpose.
Attention:
1. The,<script> label has not supported the Language property in HTML5, so I deleted:
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 the following:
document.write ("<" + tag + attr + link + "></" + tag + ">");
But after practice, Discover that the document.write () method clears all the contents of the original page before writing. Also equivalent to the meaning of coverage, so obviously do not reach my needs, I need to load the page dynamically to the page to import common JS and CSS, and can not clear my original page of any other content, so check the next API, I use:
$ ("Head"). Prepend ("<" + tag + attr + link + "></" + tag + ">");
This method, $ ("head"). The function of the prepend () method is to append the write content to the top end of the
Finally, adding a method, also through common JS, 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 u Sing DOM methods to a swanky new "SCRIPT" or "LINK" element, assign it the appropriate attributes, and Finall Y, 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 the 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 a 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 an D Add this. css file