A simple dynamic loading of JS and CSS jquery code _jquery

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.