用javascript动态加载不同css/js文件

先导入js文件。

DynamicLoad.js文件代码如下：

 

function DynamicLoad(){
    //属性
    var Self = this; //对象自身
    //功能：加载指定的文件
    //参数：src——需要被加载的文件
    //返回：（无）
    this.Load = function(src){
        if (Self.IsLoaded(src)) //判断该文件是否已经加载了
        {
            Self.OnLoaded(src);
            return;
        }
        else //如果没有加载，动态创建
        {
            var objDynamic; //动态创建的对象
            var type = Self.GetSrcType(src); //文件类型
            if (type == "js" || type == "vbs") {
                objDynamic = document.createElement("script");
                objDynamic.src = src;
                if (type == "js") {
                    objDynamic.type = "text/javascript";
                    objDynamic.language = "javascript";
                }
                else {
                    objDynamic.type = "text/vbscript";
                    objDynamic.language = "vbscript";
                }
            }
            else 
                if (type == "css") {
                    objDynamic = document.createElement("link");
                    objDynamic.rel = "stylesheet";
                    objDynamic.type = "text/css";
                    objDynamic.href = src;
                }
                else {
                    Self.OnFailed(src);
                    return;
                }
            document.getElementsByTagName("head")[0].appendChild(objDynamic); //将创建的对象插入到HEAD节中
            objDynamic.onload = objDynamic.onreadystatechange = function() //加载过程中状态改变引发的事件
            {
                //在此函数中this指针指的是s结点对象，而不是JsLoader实例，   
                //所以必须用self来调用onsuccess事件，下同。
                if (this.readyState && this.readyState == "loading") 
                    return;
                else 
                    Self.OnLoaded(src);
            };
            objDynamic.onerror = function() //加载过程中发生错误引发的事件
            {
                document.getElementsByTagName("head")[0].removeChild(objDynamic);
                Self.OnFailed(src);
            };
        }
    };
    
    //功能：判断是否已经加载了某文件
    //参数：src——需要被检查的文件
    //返回：返回是否已经加载了该文件
    this.IsLoaded = function(src){
        var isLoaded = false; //假设没有加载
        var type = Self.GetSrcType(src); //得到文件的类型
        var i; //用于循环的索引
        if (type == "js" || type == "vbs") {
            var scripts = document.getElementsByTagName("script"); //得到所有的脚本对象集合
            for (i = 0; i < scripts.length; i++) //依次判断每个script对象
            {
                if (scripts[i].src && scripts[i].src.indexOf(src) != -1) {
                    if (scripts[i].readyState == "loaded" || scripts[i].readyState == "complete") {
                        isLoaded = true;
                        break;
                    }
                }
            }
        }
        else 
            if (type == "css") {
                var links = document.getElementsByTagName("link"); //得到所有的link对象集合
                for (i = 0; i < links.length; i++) //依次判断每个link对象
                {
                    if (links[i].href && links[i].href.indexOf(src) != -1) {
                        if (links[i].readyState == "loaded" || links[i].readyState == "complete" || links[i].readyState == "interactive") {
                            isLoaded = true;
                            break;
                        }
                    }
                }
            }
        return isLoaded;
    };
    
    //功能：得到文件的类型（即扩展名）
    //参数：src——文件名
    //返回：返回文件的类型
    this.GetSrcType = function(src){
        var type = "";
        var lastIndex = src.lastIndexOf(".");
        if (lastIndex != -1) {
            type = src.substr(lastIndex + 1);
        }
        return type;
    };
    
    //功能：当文件加载完成时发生的事件
    //参数：src——加载完成的文件
    //返回：（无）
    this.OnLoaded = function(src){
        Self.LoadedCallback(src);
    };
    
    //功能：文件加载完成时执行的回调函数
    //参数：src——加载完的文件
    //返回：（无）
    this.LoadedCallback = function(src){
    };
    
    //功能：当文件加载过程中发生错误时发生的事件
    //参数：src——正在加载的文件
    //返回：（无）
    this.OnFailed = function(src){
        Self.FailedCallback(src);
    };
    
    //功能：当文件加载失败时执行的回调函数
    //参数：src——加载失败的文件
    //返回：（无）
    this.FailedCallback = function(src){
    };
}

 

 

页面代码：

 

<html>
    <body>
        <script language="javascript" type="text/javascript" src="DynamicLoad.js">
        </script>
        <script language="javascript" type="text/javascript">
            
            var dl = new DynamicLoad();
            function test1(){
                dl.Load("css.css");
            }
            
            function test2(){
                dl.Load("Admin_style.css");
            }
        </script>
        <input type="button" class="Button" onclick="test2()" value="submit"/>
        <br/>
        <input type="button" class="Button" value="button" onclick="test1()"/>
        <br/>
        <a href="">aaa</a>
    </body>
</html>

 

 

 

注释：

js文件方法本文件包含了一个名为DynamicLoad的类，该类可以为页面动态加载js、vbs和css文件。
属性：  Self——对象自身（该属性为设计时使用，程序中请尽量避免使用该属性。）
方法：  Load(src)——加载指定的文件。如果加载成功，引发OnLoaded事件；如果加载失败，引发OnFailed事件。您可以通过重载回调函数LoadedCallback和FailedCallback来执行加载对应的操作。
  IsLoaded(src)——判断指定的文件是否已经加载完毕。
  GetSrcType(src)——得到文件类型（即扩展名）
  LoadedCallback(src)——文件加载成功后执行的回调函数。请重载该方法，以处理加载文件成功之后的操作。
  FailedCallback(src)——文件加载失败后执行的回调函数。请重载该方法，以处理加载文件失败之后的操作。
事件：  OnLoaded(src)——文件加载成功事件。
  OnFailed(src)——文件加载失败事件。

/***************************/

var dl=new DynamicLoad();    //初始化DynamicLoad对象
 alert(dl.IsLoaded("DynamicLoad.js")); //判断是否已经加载了文件DynamicLoad.js
 dl.Load("HttpCookie.js");    //加载HttpCookie.js
 alert(dl.IsLoaded("HttpCookie.js")); //判断是否已经加载了文件HttpCookie.js。加载需要时间，一般情况下这里返回false；如果过一小段时间再判断，很可能返回true。

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/dcju002/archive/2009/02/12/3881835.aspx