JS动态加载JS与CSS文件

一  Html 页面 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="renderer" content="webkit" />
		<title>js css 动态加载器</title>
		<script src="js/publicjs/loadjscssfile.js"></script>
	</head>
 <body>
 
 </body>

</html>

二 动态加载js文件的程序   loadjscssfile.js

// JavaScript Document
function loadjscssfile(filename, filetype) {

	if (filetype == "js") {
		var fileref = document.createElement('script');
		fileref.setAttribute("src", filename);

	} else if (filetype == "css") {
		var fileref = document.createElement('link');
		fileref.setAttribute("rel", "stylesheet");
		fileref.setAttribute("href", filename);
	}
	if (typeof fileref != "undefined") {
		document.getElementsByTagName("head")[0].appendChild(fileref);
	}
}

loadjscssfile("css/index.css", "css");
loadjscssfile("js/index.js", "js");


三 被加载的 js文件:index.js

alert("this is index");


四 被加载的 css文件:index.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文件,或者安内容的重要性来加载

            4接下来的工作是绑定到<head>标签。绑定的时候有一个问题就是同一个文件有可能被我们绑定两次,绑定两次浏览器也不会出现异常,但是效率就低了。为了避免

这种情况我们可以新增一个全局数组变量,把绑定的文件名字保存在里面,每次绑定前先检查一下是否已经存在,假如存在就提示已经存在,假如不存在就绑定。

document.getElementsByTagName("head")[0].appendChild(fileref)



你可能感兴趣的:(html,js,css)