一個(gè)簡單的動(dòng)態(tài)加載js和css的jquery代碼，用于在生成頁面時(shí)通過js函數(shù)加載一些共通的js和css文件。
- $.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’);
將該函數(shù)寫入一個(gè)common.js文件中，在html中加載該common.js文件，就可以達(dá)到目的。該js函數(shù)出自以下鏈接：
http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html
注意：
1.在html5中，<script>標(biāo)簽已經(jīng)不支持language屬性了，所以我刪除了：
- var attr = isCSS ? " type=’text/css’ rel=’stylesheet’ " : " language=’javascript’ type=’text/javascript’ ";
中的language=’javascript’
2.原作者在寫入js和css標(biāo)簽時(shí)，用的是：
- document.write("<" + tag + attr + link + "></" + tag + ">");
但是經(jīng)過實(shí)踐，發(fā)現(xiàn)document.write（）方法會(huì)在寫入前清除原頁面的所有內(nèi)容，也就相當(dāng)于覆蓋的意思，
這樣明顯達(dá)不到我的需要，我需要在加載頁面時(shí)動(dòng)態(tài)的向頁面導(dǎo)入共通的js和css，
而不能清除我原頁面的其他任何內(nèi)容，所以查了下api，我改用了：
- $("head").prepend("<" + tag + attr + link + "></" + tag + ">");
這個(gè)方法，$("head").prepend（）方法的作用是在<head>標(biāo)簽的最前端追加寫入內(nèi)容。
最后，再補(bǔ)充一個(gè)方法，也是通過共通js來實(shí)現(xiàn)，應(yīng)該比上面這個(gè)方法更容易理解：
- 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"){
- var fileref=document.createElement(’script’)
- fileref.setAttribute("type","text/javascript")
- fileref.setAttribute("src", filename)
- }
- else if (filetype=="css"){
- 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")
- loadjscssfile("javascript.php", "js")
- loadjscssfile("mystyle.css", "css")
