快速业务通道

动态加载外部css或js文件

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-05

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

应用:1、提高代码的复用,减少代码量;2、添加一个javascript控制器和 session可以实现动态改变页面样式;3、由于是页面是从上到下依次加载文件的,并且边加载边解释,所以可以添加javascript控制器控制页面文件的加载顺序,如先加载css布局文件,再显示有图片的css美化文件,之后再加载大的falsh文件,或者安内容的重要性来加载。\r

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

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 文件

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号