如何动态加载外部CSS与JS文件
动态加载外部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>标签。绑定的时候有一个问题就是同一个文件有可能被我们绑定两次,绑定两次浏览器也不会出现异常,但是效率就低了。为了避免这种情况我们可以新增一个全局数组变量,把绑定的文件名字保存在里面,每次绑定前先检查一下是否已经存在,如果存在就提示已经存在,如果不存在就绑定。
document.getElementsByTagName("head")[0].appendChild(fileref) |