JS动态加载JS与CSS文件.docxVIP

DEMO一 HTML页面 jsforjscss.html 1 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 2 html xmlns=/1999/xhtml 3 head 4 meta http-equiv=Content-Type content=text/html; charset=utf-8 / 5 script type=text/javascript src=loadjscssfile.js/script 6 title无标题文档/title 7 /head 8 body 9 /body10 /html二 动态加载js文件的程序 loadjscssfile.js// JavaScript Documentfunction 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(do.js,js);loadjscssfile(test.css,css);三 被加载的 js文件：do.jsalert(this is do);四 被加载的 css文件：test.css （css文件中还可以用@import url(menu.css); 引进其他css文件）@charset utf-8;@import url(menu.css);@import url(../gundong.css);body{ background-color:gray;}??理论分析：?原理解析：第一步：使用dom创建script或者link标签，并给他们附加属性，如type等第二步：使用appendChild方法把标签绑定到另一个标签，一般是绑到head.应用：1、提高代码的复用，减少代码量；2、添加一个javascript控制器和 session可以实现动态改变页面样式；3、由于是页面是从上到下依次加载文件的，并且边加载边解释，所以可以添加javascript控制器控制页面文件的加载顺序，如先加载css布局文件，再显示有图片的css美化文件,之后再加载大的falsh文件，或者安内容的重要性来加载。r阅读提示：e文不好的初学者可以直接看中文，然后拷贝代码试验下。rTo 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)//定义属性type的值为text/javascriptfileref.setAttribute(src, filename)//文件的地