js實(shí)現(xiàn)動(dòng)態(tài)加載腳本的方法實(shí)例匯總

更新時(shí)間：2015年11月02日 14:34:38 作者：追夢(mèng)的遠(yuǎn)遠(yuǎn)

這篇文章主要介紹了js實(shí)現(xiàn)動(dòng)態(tài)加載腳本的方法,以實(shí)例形式匯總并分析了幾種常用的JavaScript動(dòng)態(tài)加載腳本的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)動(dòng)態(tài)加載腳本的方法。分享給大家供大家參考，具體如下：

最近公司的前端地圖產(chǎn)品需要做一下模塊劃分，希望用戶用到哪一塊的功能再加載哪一塊的模塊，這樣可以提高用戶體驗(yàn)。

所以到處查資料研究js動(dòng)態(tài)腳本的加載，不過(guò)真讓人傷心??！，網(wǎng)上幾乎都是同一篇文章，4種方法，討厭其中拷貝別人成果的人，也不加個(gè)原文的鏈接。哎！關(guān)鍵是最后一種方法還有點(diǎn)錯(cuò)誤。經(jīng)過(guò)兩天的研究查閱資料，在這里和大家分享一下。

首先我們需要一個(gè)被加載的js文件，我在一個(gè)固定文件夾下創(chuàng)建了一個(gè)package.js，打開后在里面寫一個(gè)方法functionOne，很簡(jiǎn)單，代碼如下：

function functionOne(){
  alert("成功加載");
}

后面的html文件都創(chuàng)建在同一個(gè)目錄下。

方法一：直接document.write

在同一個(gè)文件夾下面創(chuàng)建一個(gè)function1.html，代碼如下：

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加載js腳本
      document.write("<script src='package.js'><\/script>");
      //加載一個(gè)按鈕
      document.write("<input type=\"button\" value=\"測(cè)試運(yùn)行效果\" onclick=\"operation()\"\/>");
      //如果馬上使用會(huì)找不到，因?yàn)檫€沒有加載進(jìn)來(lái)，此處會(huì)報(bào)錯(cuò)
      functionOne();
    }
    function operation()
    {
      //可以運(yùn)行，顯示“成功加載”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="初始化加載" onclick="init()"/>
</body>
</html>

通過(guò)document.write的方式可以往頁(yè)面寫入腳本，如代碼所示，點(diǎn)擊按鈕“初始化加載”后可以加載package.js文件，但是立即運(yùn)行里面的方法functionOne會(huì)找不到此方法，報(bào)告錯(cuò)誤，而點(diǎn)擊第二個(gè)按鈕（通過(guò)document.write動(dòng)態(tài)創(chuàng)建的“測(cè)試運(yùn)行效果”）發(fā)現(xiàn)可以執(zhí)行，此時(shí)腳本已經(jīng)加載完畢了。由于這種方式是異步加載（一邊繼續(xù)執(zhí)行后面的代碼，一邊額外開一個(gè)線程執(zhí)行需要加載的腳本），并且document.write會(huì)重寫界面，明顯不實(shí)用。

方法二：動(dòng)態(tài)改變已有script的src屬性

在同一個(gè)文件夾下面創(chuàng)建一個(gè)function2.html，代碼如下：

<html>
<head>
  <title></title>
  <script type="text/javascript" id="yy" src=""></script>
  <script type="text/javascript">
    function init()
    {
      yy.src = "package.js";
      //如果馬上使用會(huì)找不到，因?yàn)檫€沒有加載進(jìn)來(lái)，此處會(huì)報(bào)錯(cuò)
      functionOne();
    }
    function operation()
    {
      //可以運(yùn)行，顯示“成功加載”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="測(cè)試按鈕" onclick="init()"/>
  <input type="button" value="測(cè)試運(yùn)行效果" onclick="operation()"/>
</body>
</html>

此種方法的好處在于不會(huì)改變界面元素，不至于重寫界面元素，但是同樣是異步加載，會(huì)有同樣的問題。

方法三：動(dòng)態(tài)創(chuàng)建script元素（異步）

在同一個(gè)文件夾下面創(chuàng)建一個(gè)function3.html，代碼如下：

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.src="package.js";
      document.body.appendChild(myScript);
      //如果馬上使用會(huì)找不到，因?yàn)檫€沒有加載進(jìn)來(lái)
      functionOne();
    }
    function operation()
    {
      //可以運(yùn)行，顯示“成功加載”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="測(cè)試按鈕" onclick="init()"/>
  <input type="button" value="測(cè)試運(yùn)行效果" onclick="operation()"/>
</body>
</html>

此辦法的優(yōu)勢(shì)相對(duì)于第二種而言就是不需要最開始就在界面寫一個(gè)script標(biāo)簽，缺點(diǎn)還是異步加載，存在同樣的問題。

這三種方法都是異步執(zhí)行的，所以在加載這些腳本的同時(shí)，主頁(yè)面的腳本繼續(xù)運(yùn)行，如果用以上的方法，那下面的代碼將得不到預(yù)期的效果。

不過(guò)可以在functionOne前面加一個(gè)alert就可以堵塞一下主頁(yè)面腳本的運(yùn)行，然后你發(fā)現(xiàn)functionOne就可以運(yùn)行了，或者你的后期代碼需要在另一個(gè)按鈕下執(zhí)行，一步一步的來(lái)，要不就定義一個(gè)計(jì)時(shí)器，在固定時(shí)間后再執(zhí)行后面的代碼，不過(guò)在項(xiàng)目里面肯定不可能使用這些方法。

其實(shí)第三種方法改一點(diǎn)就變成同步加載了。

方法四：動(dòng)態(tài)創(chuàng)建script元素（同步）

在同一個(gè)文件夾下面創(chuàng)建一個(gè)function4.html，代碼如下：

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功運(yùn)行\(zhòng)"); }"));
      document.body.appendChild(myScript);
      //此處發(fā)現(xiàn)可以運(yùn)行
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="測(cè)試按鈕" onclick="init()"/>
</body>
</html>

此方法并沒有加載外部的js文件，而是給myScript添加了子項(xiàng)。在Firefox、Safari、Chrome、Opera和IE9中，這些代碼可以正常運(yùn)行。但是在IE8以及以下的版本中會(huì)導(dǎo)致錯(cuò)誤。IE將<script>視為一個(gè)特殊的元素，不允許DOM訪問其子節(jié)點(diǎn)。不過(guò)可以用<script>元素的text屬性來(lái)制定js代碼，想下面的例子這樣：

var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.text = "function functionOne(){alert(\"成功運(yùn)行\(zhòng)"); }";
document.body.appendChild(myScript);
//此處可以運(yùn)行
functionOne();

經(jīng)過(guò)這樣修改之后的代碼可以在IE、Firefox、Opera和Safari3及之后版本中運(yùn)行。Safari3.0之前的版本雖然不能正確地支持text屬性，但卻允許使用文本節(jié)點(diǎn)技術(shù)來(lái)指定代碼。如果需要兼容早期版本的Safari，可以使用下面代碼：

var myScript= document.createElement("script");
myScript.type = "text/javascript";
var code = "function functionOne(){alert(\"成功運(yùn)行\(zhòng)"); }";
try{
    myScript.appendChild(document.createTextNode(code));
}
catch (ex){
    myScript.text = code;
}
document.body.appendChild(myScript);
//此處發(fā)現(xiàn)可以運(yùn)行
functionOne();

這里，首先嘗試標(biāo)準(zhǔn)的DOM文本節(jié)點(diǎn)方法，因?yàn)槌薎E8以及以下，所有瀏覽器都支持這種方式。如果這行代碼拋出了錯(cuò)誤，那么說(shuō)明是IE8以及以下，于是就必須使用text屬性了。整個(gè)過(guò)程可以用以下函數(shù)來(lái)表示：

function loadScriptString(code)
{
  var myScript= document.createElement("script");
  myScript.type = "text/javascript";
  try{
    myScript.appendChild(document.createTextNode(code));
  }
  catch (ex){
    myScript.text = code;
  }
  document.body.appendChild(myScript);
}

然后你可以在其他地方使用此方法來(lái)加載需要使用的代碼。實(shí)際上，這樣執(zhí)行代碼與在全局作用于中把相同字符串傳遞給eval()是一樣的。但是我們這里只能使用字符串形式的代碼，也有局限性，用戶一般希望提供的方法形如loadScriptAddress("package.js")的方式，所以我們還需要繼續(xù)討論。

方法五：XMLHttpRequest/ActiveXObject異步加載

在同一個(gè)文件夾下面創(chuàng)建一個(gè)function5.html，代碼如下：

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加載package.js文件，設(shè)置script的id為yy
      ajaxPage("yy","package.js");
      //此方法為package.js里面的方法，此處執(zhí)行方法成功
      functionOne();
    }
    function ajaxPage(sId,url)
    {
      var oXmlHttp = getHttpRequest();
      oXmlHttp.onreadystatechange = function()
      {
        //4代表數(shù)據(jù)發(fā)送完畢
        if ( oXmlHttp.readyState == 4 )
        {
          //0為訪問的本地，200代表訪問服務(wù)器成功，304代表沒做修改訪問的是緩存
          if(oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304)
          {
            includeJS(sId,oXmlHttp.responseText);
          }
          else
          {
          }
        }
      }
      oXmlHttp.open("GET",url,true);
      oXmlHttp.send(null);
    }
    function getHttpRequest()
    {
      if(window.ActiveXObject)//IE
      {
        return new ActiveXObject("MsXml2.XmlHttp");
      }
      else if(window.XMLHttpRequest)//其他
      {
        return new XMLHttpRequest();
      }
    }
    function includeJS(sId,source)
    {
      if((source != null)&&(!document.getElementById(sId)))
      {
        var myHead = document.getElementsByTagName("HEAD").item(0);
        var myScript = document.createElement( "script" );
        myScript.language = "javascript";
        myScript.type = "text/javascript";
        myScript.id = sId;
        try{
          myScript.appendChild(document.createTextNode(source));
        }
        catch (ex){
          myScript.text = source;
        }
        myHead.appendChild( myScript );
      }
    }
  </script>
</head>
<body>
  <input type="button" value="測(cè)試按鈕" onclick="init()"/>
</body>
</html>

ActiveXObject只有IE里面才有，其他瀏覽器大部分支持XMLHttpRequest，通過(guò)此辦法我們可以實(shí)現(xiàn)動(dòng)態(tài)加載腳本了，不過(guò)是異步加載，也沒法運(yùn)行functionOne，第二次就可以運(yùn)行了，但是可惜的是在IE、Firefox、Safari下可以運(yùn)行，在Opera、Chrome下會(huì)出錯(cuò)，Chrome下的錯(cuò)誤如下：

不過(guò)只要發(fā)布之后在Chrome和Opera下就不會(huì)出現(xiàn)錯(cuò)誤了。

其實(shí)這里把open里面設(shè)置為false就是同步加載了，同步加載不需要設(shè)置onreadystatechange事件。

方法六：XMLHttpRequest/ActiveXObject同步加載

在這里我把一些情況考慮在內(nèi)，寫成了一個(gè)方法，封裝為loadJS.js，方便以后直接調(diào)用，代碼如下：

/**
 * 同步加載js腳本
 * @param id  需要設(shè)置的<script>標(biāo)簽的id
 * @param url  js文件的相對(duì)路徑或絕對(duì)路徑
 * @return {Boolean}  返回是否加載成功，true代表成功，false代表失敗
 */
function loadJS(id,url){
  var xmlHttp = null;
  if(window.ActiveXObject)//IE
  {
    try {
      //IE6以及以后版本中可以使用
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      //IE5.5以及以后版本可以使用
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  else if(window.XMLHttpRequest)//Firefox，Opera 8.0+，Safari，Chrome
  {
    xmlHttp = new XMLHttpRequest();
  }
  //采用同步加載
  xmlHttp.open("GET",url,false);
  //發(fā)送同步請(qǐng)求，如果瀏覽器為Chrome或Opera，必須發(fā)布后才能運(yùn)行，不然會(huì)報(bào)錯(cuò)
  xmlHttp.send(null);
  //4代表數(shù)據(jù)發(fā)送完畢
  if ( xmlHttp.readyState == 4 )
  {
    //0為訪問的本地，200到300代表訪問服務(wù)器成功，304代表沒做修改訪問的是緩存
    if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304)
    {
      var myHead = document.getElementsByTagName("HEAD").item(0);
      var myScript = document.createElement( "script" );
      myScript.language = "javascript";
      myScript.type = "text/javascript";
      myScript.id = id;
      try{
        //IE8以及以下不支持這種方式，需要通過(guò)text屬性來(lái)設(shè)置
        myScript.appendChild(document.createTextNode(xmlHttp.responseText));
      }
      catch (ex){
        myScript.text = xmlHttp.responseText;
      }
      myHead.appendChild( myScript );
      return true;
    }
    else
    {
      return false;
    }
  }
  else
  {
    return false;
  }
}

此處考慮到了瀏覽器的兼容性以及當(dāng)為Chrome、Opera時(shí)必須是發(fā)布，注釋還是寫的比較清楚的，以后需要加載某個(gè)js文件時(shí)，只需要一句話就行了，如loadJS("myJS","package.js")。方便實(shí)用。

如果想要實(shí)現(xiàn)不發(fā)布還非要兼容所有瀏覽器，至少我還沒找出這樣的同步加載的辦法，我們只能通過(guò)異步加載開出回調(diào)函數(shù)來(lái)實(shí)現(xiàn)。

方法七：回調(diào)函數(shù)方式

在同一個(gè)文件夾下面創(chuàng)建一個(gè)function7.html，代碼如下：

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加載package.js文件，設(shè)置script的id為yy
      loadJs("yy","package.js",callbackFunction);
    }
    function callbackFunction()
    {
      functionOne();
    }
    function loadJs(sid,jsurl,callback){
      var nodeHead = document.getElementsByTagName('head')[0];
      var nodeScript = null;
      if(document.getElementById(sid) == null){
        nodeScript = document.createElement('script');
        nodeScript.setAttribute('type', 'text/javascript');
        nodeScript.setAttribute('src', jsurl);
        nodeScript.setAttribute('id',sid);
        if (callback != null) {
          nodeScript.onload = nodeScript.onreadystatechange = function(){
            if (nodeScript.ready) {
              return false;
            }
            if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') {
              nodeScript.ready = true;
              callback();
            }
          };
        }
        nodeHead.appendChild(nodeScript);
      } else {
        if(callback != null){
          callback();
        }
      }
    }
  </script>
</head>
<body>
  <input type="button" value="測(cè)試按鈕" onclick="init()"/>
</body>
</html>

這種方式所有瀏覽器都支持，但是后面的代碼必須放在回調(diào)函數(shù)里面，也就是異步加載了。看需求使用把！我還是比較喜歡第六種方法的。如果是異步加載的話，方法還有好幾種，不過(guò)我的出發(fā)點(diǎn)是希望實(shí)現(xiàn)同步加載，這里就不對(duì)異步加載做總結(jié)了。

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: