动态加载js和css的jquery plugin

2024-04-27 14:32:37

字体：大中小

来源：转载

供稿：网友

动态加载js和CSS的jquery plugin

一个简单的动态加载js和css的jquery代码，用于在生成页面时通过js函数加载一些共通的js和css文件。

java代码

//howtousethefunctionbelow:
//$.include('file/Ajaxa.js');$.include('file/ajaxa.css');
//or$.includePath='file/';$.include(['ajaxa.js','ajaxa.css']);(onlyif.jsand.cssfilesareinthesamedirectory)
$.extend({
includePath:'',
include:function(file)
{
varfiles=typeoffile=="string"?[file]:file;
for(vari=0;i<files.length;i++)
{
varname=files[i].replace(/^/s|/s$/g,"");
varatt=name.split('.');
varext=att[att.length-1].toLowerCase();
varisCSS=ext=="css";
vartag=isCSS?"link":"script";
varattr=isCSS?"type='text/css'rel='stylesheet'":"type='text/Javascript'";
varlink=(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');

将该函数写入一个common.js文件中，在html中加载该common.js文件，就可以达到目的。该js函数出自以下链接：http://www.cnblogs.com/chenjinfa/archive/2009/03/17/1414178.html注意：1.在html5中，<script>标签已经不支持language属性了，所以我删除了：

Java代码

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

中的language='javascript'2.原作者在写入js和css标签时，用的是：

Java代码

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

但是经过实践，发现document.write（）方法会在写入前清除原页面的所有内容，也就相当于覆盖的意思，这样明显达不到我的需要，我需要在加载页面时动态的向页面导入共通的js和css，而不能清除我原页面的其他任何内容，所以查了下api，我改用了：

Java代码

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

这个方法，$("head").prepend（）方法的作用是在<head>标签的最前端追加写入内容。最后，再补充一个方法，也是通过共通js来实现，应该比上面这个方法更容易理解：

Java代码

DynamicallyloadingexternalJavaScriptandCSSfiles
Toloada.jsor.cssfiledynamically,inanutshell,itmeansusingDOMmethodstofirstcreateaswankynew"SCRIPT"or"LINK"element,assignittheappropriateattributes,andfinally,useelement.appendChild()toaddtheelementtothedesiredlocationwithinthedocumenttree.Itsoundsalotmorefancythanitreallyis.Letsseehowitallcomestogether:
functionloadjscssfile(filename,filetype){
if(filetype=="js"){//iffilenameisaexternalJavaScriptfile
varfileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src",filename)
}
elseif(filetype=="css"){//iffilenameisanexternalCSSfile
varfileref=document.createElement("link")
fileref.setAttribute("rel","stylesheet")
fileref.setAttribute("type","text/css")
fileref.setAttribute("href",filename)
}
if(typeoffileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
loadjscssfile("myscript.js","js")//dynamicallyloadandaddthis.jsfile
loadjscssfile("javascript.php","js")//dynamicallyload"javascript.php"asaJavaScriptfile
loadjscssfile("mystyle.css","css")////dynamicallyloadandaddthis.cssfile