在HTML中動態載入Javascript檔案(2)

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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){};
}

頁面代碼：

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。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More