js實作動態載入腳本的方法實例匯總_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

js實作動態載入腳本的方法實例匯總_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:34 PM

js載入動態

本文實例講述了js實作動態載入腳本的方法。分享給大家參考，具體如下：

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

所以到處查資料研究js動態腳本的加載，不過真是讓人傷心啊！，網路上幾乎都是同一篇文章，4種方法，討厭其中拷貝別人成果的人，也不加個原文的連結。哎！關鍵是最後一種方法還有點錯誤。經過兩天的研究查閱資料，在這裡和大家分享一下。

首先我們需要一個被載入的js文件，我在一個固定資料夾下建立了一個package.js，打開後在裡面寫一個方法functionOne，很簡單，程式碼如下：

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

後面的html檔案都建立在同一個目錄下。

方法一：直接document.write

在同一個資料夾下方建立一個function1.html，程式碼如下：

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载js脚本
      document.write("<script src='package.js'><\/script>");
      //加载一个按钮
      document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");
      //如果马上使用会找不到，因为还没有加载进来，此处会报错
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="初始化加载" onclick="init()"/>
</body>
</html>

透過document.write的方式可以往頁面寫入腳本，如程式碼所示，點擊按鈕「初始化載入」後可以載入package.js文件，但立即運行裡面的方法functionOne會找不到此方法，報告錯誤，而點擊第二個按鈕（透過document.write動態建立的「測試運行效果」）發現可以執行，此時腳本已經載入完畢了。由於這種方式是非同步載入（一邊繼續後面的程式碼，一邊額外開一個執行緒執行需要載入的腳本），並且document.write會重寫介面，明顯不實用。

方法二：動態改變已有script的src屬性

在同一個資料夾下方建立一個function2.html，程式碼如下：

<html>
<head>
  <title></title>
  <script type="text/javascript" id="yy" src=""></script>
  <script type="text/javascript">
    function init()
    {
      yy.src = "package.js";
      //如果马上使用会找不到，因为还没有加载进来，此处会报错
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

此種方法的好處是不會改變介面元素，不至於重寫介面元素，但是同樣是非同步加載，會有同樣的問題。

方法三：動態建立script元素（非同步）

在同一個資料夾下方建立一個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);
      //如果马上使用会找不到，因为还没有加载进来
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

此辦法的優勢相對於第二種而言就是不需要最開始就在介面寫一個script標籤，缺點還是非同步加載，存在同樣的問題。

這三種方法都是非同步執行的，所以在載入這些腳本的同時，主頁面的腳本繼續運行，如果用以上的方法，那下面的程式碼將不會得到預期的效果。

不過可以在functionOne前面加一個alert就可以堵塞一下主頁面腳本的運行，然後你發現functionOne就可以運行了，或者你的後期代碼需要在另一個按鈕下執行，一步一步的來，要么就定義一個計時器，在固定時間後再執行後面的程式碼，不過在專案裡面絕對不可能使用這些方法。

其實第三種方法改一點就變成同步載入了。

方法四：動態建立script元素（同步）

在同一個資料夾下方建立一個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(\"成功运行\"); }"));
      document.body.appendChild(myScript);
      //此处发现可以运行
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

此方法並沒有載入外部的js文件，而是為myScript添加了子項。在Firefox、Safari、Chrome、Opera和IE9中，這些程式碼可以正常運作。但是在IE8以及以下的版本會導致錯誤。 IE將<script>視為一個特殊的元素，不允許DOM存取其子節點。不過可以用<script>元素的text屬性來制定js程式碼，想下面的例子這樣：</script>

var myScript= document.createElement("script");
myScript.type = "text/javascript";
myScript.text = "function functionOne(){alert(\"成功运行\"); }";
document.body.appendChild(myScript);
//此处可以运行
functionOne();

經過這樣修改後的程式碼可以在IE、Firefox、Opera和Safari3及之後版本中運作。 Safari3.0之前的版本雖然無法正確支援text屬性，但卻允許使用文字節點技術來指定程式碼。如果需要相容早期版本的Safari，可以使用下面程式碼：

var myScript= document.createElement("script");
myScript.type = "text/javascript";
var code = "function functionOne(){alert(\"成功运行\"); }";
try{
    myScript.appendChild(document.createTextNode(code));
}
catch (ex){
    myScript.text = code;
}
document.body.appendChild(myScript);
//此处发现可以运行
functionOne();

這裡，首先嘗試標準的DOM文字節點方法，因為除了IE8以及以下，所有瀏覽器都支援這種方式。如果這行程式碼拋出了錯誤，那麼表示是IE8以及以下，所以就必須使用text屬性了。整個過程可以用以下函數來表示：

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

然後你可以在其他地方使用此方法來載入需要使用的程式碼。實際上，這樣執行程式碼與在全域作用於中把相同字串傳遞給eval()是一樣的。但我們這裡只能使用字串形式的程式碼，也有局限性，使用者一般希望提供的方法形狀如loadScriptAddress("package.js")的方式，所以我們還需要繼續討論。

方法五：XMLHttpRequest/ActiveXObject非同步載入

在同一個資料夾下方建立一個function5.html，程式碼如下：

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载package.js文件，设置script的id为yy
      ajaxPage("yy","package.js");
      //此方法为package.js里面的方法，此处执行方法成功
      functionOne();
    }
    function ajaxPage(sId,url)
    {
      var oXmlHttp = getHttpRequest();
      oXmlHttp.onreadystatechange = function()
      {
        //4代表数据发送完毕
        if ( oXmlHttp.readyState == 4 )
        {
          //0为访问的本地，200代表访问服务器成功，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="测试按钮" onclick="init()"/>
</body>
</html>

ActiveXObject只有IE里面才有，其他浏览器大部分支持XMLHttpRequest，通过此办法我们可以实现动态加载脚本了，不过是异步加载，也没法运行functionOne，第二次就可以运行了，但是可惜的是在IE、Firefox、Safari下可以运行，在Opera、Chrome下会出错，Chrome下的错误如下：

不过只要发布之后在Chrome和Opera下就不会出现错误了。

其实这里把open里面设置为false就是同步加载了，同步加载不需要设置onreadystatechange事件。

方法六：XMLHttpRequest/ActiveXObject同步加载

在这里我把一些情况考虑在内，写成了一个方法，封装为loadJS.js，方便以后直接调用，代码如下：

/**
 * 同步加载js脚本
 * @param id  需要设置的<script>标签的id
 * @param url  js文件的相对路径或绝对路径
 * @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);
  //发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错
  xmlHttp.send(null);
  //4代表数据发送完毕
  if ( xmlHttp.readyState == 4 )
  {
    //0为访问的本地，200到300代表访问服务器成功，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以及以下不支持这种方式，需要通过text属性来设置
        myScript.appendChild(document.createTextNode(xmlHttp.responseText));
      }
      catch (ex){
        myScript.text = xmlHttp.responseText;
      }
      myHead.appendChild( myScript );
      return true;
    }
    else
    {
      return false;
    }
  }
  else
  {
    return false;
  }
}

此处考虑到了浏览器的兼容性以及当为Chrome、Opera时必须是发布，注释还是写的比较清楚的，以后需要加载某个js文件时，只需要一句话就行了，如loadJS("myJS","package.js")。方便实用。

如果想要实现不发布还非要兼容所有浏览器，至少我还没找出这样的同步加载的办法，我们只能通过异步加载开出回调函数来实现。

方法七：回调函数方式

在同一个文件夹下面创建一个function7.html，代码如下：

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载package.js文件，设置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="测试按钮" onclick="init()"/>
</body>
</html>

这种方式所有浏览器都支持，但是后面的代码必须放在回调函数里面，也就是异步加载了。看需求使用把！我还是比较喜欢第六种方法的。如果是异步加载的话，方法还有好几种，不过我的出发点是希望实现同步加载，这里就不对异步加载做总结了。

希望本文所述对大家JavaScript程序设计有所帮助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。