JS动态加载JS文件与CSS文件

原理解析：

第一步：使用dom创建<script type="text/javascript"> 或者 <link>标签，并给他们附加属性，如type等

第二步：使用appendChild方法把标签绑定到另一个标签，一般是绑到<head>.

应用：

1、提高代码的复用，减 少代码量；

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

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

DEMO 一 HTML页面  jsforjscss.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="loadjscssfile.js"></script>
<title>无标题文档</title>
</head>
<body>
</body>
</html>

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

// JavaScript Document
function loadjscssfile(filename, filetype) {
if (filetype == "js") {
var fileref = document.createElement('script');
fileref.setAttribute("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("do.js", "js");
loadjscssfile("test.css", "css");

 三 被加载的 js文件：

do.alert("this is do");

四 被加载的 css文件：test.css （css文件中还可以用@import url("menu.css"); 引进其他css文件）

@charset "utf-8";
@import url("menu.css");
@import url("../gundong.css");
body{
    background-color:gray;
}
posted @ 2012-12-17 11:45  lines  阅读(373)  评论(0)  编辑  收藏  举报