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

来源:互联网 发布:找不到占用80端口进程 编辑:程序博客网 时间:2024/05/16 04:48

先导入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

原创粉丝点击