Provides various official and user-released code examples. For code reference, you are welcome to learn a class that dynamically loads js and css.
Although rarely used, but still used
Self-modified
/**
* YLoader
* Dynamic loading of js css
* Usage
*
* Var yLoader = new YLoader ();
*
* 1. dynamically load js
* YLoader. use ('HTTP: // xxx.com/static/js/jquery.js ');
* 2. How to execute dynamic loading of js
* YLoader. use ('HTTP: // xxx.com/static/js/jquery.js', function (){...});
* 3. dynamically load css
* YLoader. use ('HTTP: // xxx.com/static/css/home.css ');
*/
Function YLoader (){
This.doc = document;
This. IS_CSS_REG =/\. css (? :\? | $)/I;
This. READY_STATE_REG =/^ (? : Loaded | complete | undefined) $ /;
// Bug fix
// 'Onload' event is not supported in WebKit <535.23 and Firefox <9.0
// Ref:
//-Https://bugs.webkit.org/show_activity.cgi? Id = 38995
//-Https://bugzilla.mozilla.org/show_bug.cgi? Id = 185236
// Https://developer.mozilla.org/en/HTML/Element/link#Stylesheet_load_events
This. isOldWebKit = (window. navigator. userAgent. replace (/. * AppleWebKit \/(\ d + )\.. */, "$1") * 1 <536;
// For some cache cases in IE 6-8, the script executes IMMEDIATELY after
// The end of the insert execution, so use 'currentlyaddingscript'
// Hold current node
This. currentlyAddingScript = '';
This. head = this.doc. getElementsByTagName ('head') [0];
// Ref: #185 & http://dev.jquery.com/ticket/2709
This. baseElement = this. head. getElementsByTagName ("base") [0];
}
YLoader. prototype = {
Constructor: YLoader
, IsFunction: function (fn ){
Return "[object Function]" === Object. prototype. toString. call (fn );
}
, PollCss: function (node, callback ){
Var _ self = this;
Var sheet = node. sheet;
Var isLoaded = false;
// For WebKit <536
If (_ self. isOldWebKit ){
If (sheet ){
IsLoaded = true;
}
} Else {
If (sheet) {// for Firefox <9.0
Try {
If(sheet.css Rules ){
IsLoaded = true;
}
} Catch (ex ){
// The value of 'ex. name' is changed from "NS_ERROR_DOM_SECURITY_ERR"
// To "SecurityError" since Firefox 13.0. But Firefox is less than 9.0
// In here, So it is OK to just rely on "NS_ERROR_DOM_SECURITY_ERR"
If (ex. name = "NS_ERROR_DOM_SECURITY_ERR "){
IsLoaded = true;
}
}
}
}
SetTimeout (function (){
If (isLoaded ){
// Place callback here to give time for style rendering
_ Self. isFunction (callback) & callback ();
} Else {
_ Self. pollCss (node, callback );
}
}, 50 );
}
, AddOnload: function (node, callback, isCss ){
Var _ self = this;
Var missingOnload = isCss & (_ self. isOldWebKit |! ("Onload" in node ));
// For Old WebKit and Old Firefox
If (missingOnload ){
SetTimeout (function (){
_ Self. pollCss (node, callback );
}, 10); // Begin after node insertion
Return;
}
Node. onload = node. onerror = node. onreadystatechange = function (){
If (_ self. READY_STATE_REG.test (node. readyState )){
// Ensure only run once and handle memory leak in IE
Node. onload = node. onerror = node. onreadystatechange = null;
// Remove the script to reduce memory leak
If (! IsCss ){
_ Self. head. removeChild (node );
}
// Dereference the node
Node = null;
_ Self. isFunction (callback) & callback ();
}
};
}
, Use: function (url, callback, charset ){
Var isCss = this. IS_CSS_REG.test (url );
Var node = this.doc. createElement (isCss? "Link": "script ");
If (undefined! = Charset ){
Node. charset = charset;
}
This. addOnload (node, callback, isCss );
If (isCss ){
Node. rel = "stylesheet ";
Node. href = url;
} Else {
Node. async = true;
Node. src = url;
}
This. currentlyAddingScript = node;
// Ref: #185 & http://dev.jquery.com/ticket/2709
This. baseElement?
This. head. insertBefore (node, this. baseElement ):
This. head. appendChild (node );
This. currentlyAddingScript = null;
}
};
YLoader.js.rar (1.64 KB download: 20 times)
AD: truly free, domain name + VM + enterprise mailbox = 0 RMB