zoukankan      html  css  js  c++  java
  • 在HTML中动态加载Javascript文件(2)

    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。

  • 相关阅读:
    转:超级好用的流程图js框架
    流程图插件
    转:介绍几个著名的实用的Java反编译工具,提供下载
    关于 web.config impersonate 帐号模拟
    SQLSERVER 使用 ROLLUP 汇总数据,实现分组统计,总计(合计),小计
    【论文排版工具】——LaTeX的安装及使用(MiKTeX+TexStudio+Windows)
    C语言输入带空格的字符串
    SQL-连接查询:left join,right join,inner join,full join之间的区别
    MySQL与Oracle的隔离级别
    区块链节点运维相关
  • 原文地址:https://www.cnblogs.com/Denny_Yang/p/1962002.html
Copyright © 2011-2022 走看看