JS动态加载JS与CSS文件

DEMO一HTML页面jsforjscss.html1!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/5scripttype=text/javascriptsrc=loadjscssfile.js/script6title无标题文档/title7/head8body9/body10/html二动态加载js文件的程序loadjscssfile.js//JavaScriptDocumentfunctionloadjscssfile(filename,filetype){if(filetype==js){varfileref=document.createElement('script');fileref.setAttribute(type,text/javascript);fileref.setAttribute(src,filename);}elseif(filetype==css){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(do.js,js);loadjscssfile(test.css,css);三被加载的js文件：do.jsalert(thisisdo);四被加载的css文件：test.css（css文件中还可以用@importurl(menu.css);引进其他css文件）@charsetutf-8;@importurl(menu.css);@importurl(../gundong.css);body{background-color:gray;}理论分析：原理解析：第一步：使用dom创建script或者link标签，并给他们附加属性，如type等第二步：使用appendChild方法把标签绑定到另一个标签，一般是绑到head.应用：1、提高代码的复用，减少代码量；2、添加一个javascript控制器和session可以实现动态改变页面样式；3、由于是页面是从上到下依次加载文件的，并且边加载边解释，所以可以添加javascript控制器控制页面文件的加载顺序，如先加载css布局文件，再显示有图片的css美化文件,之后再加载大的falsh文件，或者安内容的重要性来加载。r阅读提示：e文不好的初学者可以直接看中文，然后拷贝代码试验下。rToloada.jsor.cssfiledynamically,inanutshell,itmeansusingDOMmethodstofirstcreateaswankynewscriptorLINKelement,assignittheappropriateattributes,andfinally,useelement.appendChild()toaddtheelementtothedesiredlocationwithinthedocumenttree.Itsoundsalotmorefancythanitreallyis.Letsseehowitallcomestogether:functionloadjscssfile(filename,filetype){if(filetype==js){//判定文件类型varfileref=document.createElement('script')//创建标签fileref.setAttribute(type,text/javascript)//定义属性type的值为text/javascriptfileref.setAttribute(src,filename)//文件的地址}elseif(filetype==css){//判定文件类型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)//打开页面时浏览器动态的加载文件loadjscssfile(javascript.php,js)//打开页面时浏览器动态的加载javascript.php，loadjscssfile(mystyle.css,css)//打开页面时浏览器动态的加载.css文件接下来的工作是绑定到head标签。绑定的时候有一个问题就是同一个文件有可能被我们绑定两次，绑定两次浏览器也不会出现异常，但是效率就低了。为了避免r这种情况我们可以新增一个全局数组变量，把绑定的文件名字保存在里面，每次绑定前先检查一下是否已经存在，假如存在就提示已经存在，假如不存在就绑定。rdocument.getElementsByTagName(head)[0].appendChild(fileref)ByreferencingtheHEADelementofthepagefirstandthencallingappendChild(),thismeansthenewlycreatedelementisaddedtotheveryendoftheHEADtag.Furthermore,youshouldbeawarethatnoexistingelementisharmedintheaddingofthenewelement-thatistosay,ifyoucallloadjscssfile(myscript.js,js)twice,younowendupwithtwonewscriptelementsbothpointingtothesameJavascriptfile.Thisisproblematiconlyfromanefficiencystandpoint,asyou'llbeaddingredundantelementstothepageandusingunnecessarybrowsermemoryintheprocess.Asimplewaytopreventthesamefilefrombeingaddedmorethanonceistokeeptrackofthefilesaddedbyloadjscssfile(),andonlyloadafileifit'snew:ByreferencingtheHEADelementofthepagefirstandthencallingappendChild(),thismeansthenewlycreatedelementisaddedtotheveryendoftheHEADtag.Furthermore,youshouldbeawarethatnoexistingelementisharmedintheaddingofthenewelement-thatistosay,ifyoucallloadjscssfile(myscript.js,js)twice,younowendupwithtwonewscriptelementsbothpointingtothesameJavascriptfile.Thisisproblematiconlyfromanefficiencystandpoint,asyou'llbeaddingredundantelementstothepageandusingunnecessarybrowsermemoryintheprocess.Asimplewaytopreventthesamefilefrombeingaddedmorethanonceistokeeptrackofthefilesaddedbyloadjscssfile(),andonlyloadafileifit'snew:HereI'mjustcrudelydetectingtoseeifafilethat'ssettobeaddedalreadyexistswithinalistofaddedfiles'namesstoredinvariablefilesaddedbeforedecidingwhethertoproceedornot.Ok,movingon,sometimesthesituationmayrequirethatyouactuallyremoveorreplaceanadded.jsor.cssfile.Letsseehowthat'sdonenext.