您的位置:首页 >> Web开发 >> HTML基础 >> 正文
HTML基础 RSS
 

动态加载外部css或js文件

http://www.rdxx.com 07年12月23日 21:52 Levelup 我要投稿

关键词: 动态加载 , CSS , 文件 , 动态 , 加载
 

      原理解析:第一步:使用dom创建<script>或者<link>标签,并给他们附加属性,如type等第二步:使用appendChild方法把标签绑定到另一个标签,一般是绑到<head>.

      应用:

  1、提高代码的复用,减少代码量;

  2、添加一个javascript控制器和 session可以实现动态改变页面样式;

  3、由于是页面是从上到下依次加载文件的,并且边加载边解释,所以可以添加javascript控制器控制页面文件的加载顺序,如先加载css布局文件,再显示有图片的css美化文件,之后再加载大的falsh文件,或者安内容的重要性来加载。

      阅读提示:e文不好的初学者可以直接看中文,然后拷贝代码试验下。 

      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")//定义属性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") // 打开页面时浏览器动态的加载"javascript.php" ,
loadjscssfile("mystyle.css", "css") //打开页面时浏览器动态的加载.css 文件

以下是引用片段:
function loadjscssfile(filename, filetype){
if (filetype=="js"){ //判断文件类型
  var fileref=document.createElement('script')//创建标签
  fileref.setAttribute("type","text/javascript")//定义属性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") // 打开页面时浏览器动态的加载"javascript.php" ,
loadjscssfile("mystyle.css", "css") //打开页面时浏览器动态的加载.css 文件

共2页  第1页 第2页


 
 
标签: 动态加载 , CSS , 文件 , 动态 , 加载 打印本文
 
 
  热点搜索
 
 
 



Valid XHTML 1.0 Transitional
Copyright ©2005 - 2008 Rdxx.Com,All Rights Reserved
收藏本页
收藏本站