Un code jquery simple pour charger dynamiquement js et css_jquery

Un code jquery simple pour charger dynamiquement js et css, qui est utilisé pour charger certains fichiers js et css courants via les fonctions js lors de la génération de pages.

//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 &#63; "link" : "script"; 
var attr = isCSS &#63; " type='text/css' rel='stylesheet' " : " type='text/javascript' "; 
var link = (isCSS &#63; "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');

Écrivez cette fonction dans un fichier common.js et chargez le fichier common.js en html pour atteindre l'objectif.
Remarque :
1. En html5, la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a ne supporte plus l'attribut langue, je l'ai donc supprimée :

var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";

langage='javascript' dans

2. Lorsque l'auteur original a écrit les balises js et css, il a utilisé :

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

Mais après pratique, j'ai découvert que la méthode document.write() effacera tout le contenu de la page d'origine avant d'écrire, ce qui équivaut à un écrasement. Cela ne répond évidemment pas à mes besoins. J'ai besoin de charger dynamiquement la page. . En important des js et css communs sur la page, mais sans effacer aucun autre contenu de ma page d'origine, j'ai donc vérifié l'API et je l'ai utilisée à la place :

.

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

Cette méthode, la méthode $("head").prepend() est utilisée pour ajouter du contenu au début de la balise 93f0f5c25f18dab9d176bd4f6de5d30e

Enfin, ajoutez une autre méthode, qui est également implémentée via common js. Elle devrait être plus facile à comprendre que la méthode ci-dessus :

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