首页 > 开发 > CSS > 正文

教你如何动态加载外部CSS与JS文件

2024-07-11 08:20:43
字体:
来源:转载
供稿:网友
  动态加载外部CSS与JS文件使用dom创建<script>或者<link>标签,并给他们附加属性,如type等。然后使用appendChild方法把标签绑定到另一个标签,一般是绑到<head>。
  应用:
  1、提高代码的复用,减少代码量;
  2、添加一个javascript控制器和 session可以实现动态改变页面样式;
  3、由于是页面是从上到下依次加载文件的,并且边加载边解释,所以可以添加javascript控制器控制页面文件的加载顺序,如先加载css布局文件,再显示有图片的css美化文件,之后再加载大的falsh文件,或者安内容的重要性来加载。

  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:

  接下来的工作是绑定到<head>标签。绑定的时候有一个问题就是同一个文件有可能被我们绑定两次,绑定两次浏览器也不会出现异常,但是效率就低了。为了避免
  这种情况我们可以新增一个全局数组变量,把绑定的文件名字保存在里面,每次绑定前先检查一下是否已经存在,如果存在就提示已经存在,如果不存在就绑定。

示例代码 [www.CuoXIn.com]
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表