Kod jquery mudah untuk memuatkan js dan css_jquery secara dinamik

Kod jquery ringkas untuk memuatkan js dan css secara dinamik, yang digunakan untuk memuatkan beberapa fail js dan css biasa melalui fungsi js semasa menjana halaman.

//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');

Tulis fungsi ini ke dalam fail common.js dan muatkan fail common.js dalam html untuk mencapai matlamat.
Nota:
1. Dalam html5, teg tidak lagi menyokong atribut bahasa, jadi saya memadamkannya:

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

language='javascript' dalam

2. Apabila pengarang asal menulis tag js dan css, dia menggunakan:

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

Tetapi selepas berlatih, saya mendapati bahawa kaedah document.write() akan mengosongkan semua kandungan halaman asal sebelum menulis, yang bersamaan dengan menulis ganti ini jelas tidak memenuhi keperluan saya, saya perlu memuatkan halaman secara dinamik . Mengimport js dan css biasa ke halaman, tetapi tidak mengosongkan kandungan lain halaman asal saya, jadi saya menyemak api dan saya menggunakannya:

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

Kaedah ini, kaedah $("head").prepend() digunakan untuk menambahkan kandungan pada hujung hadapan teg

Akhir sekali, tambah kaedah lain, yang juga dilaksanakan melalui js biasa Ia sepatutnya lebih mudah difahami daripada kaedah di atas:

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