在HTML中動態載入Javascript檔案

在HTML中動態載入Javascript檔案–好像還有點問題

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

上載者：User

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
</head>
<body>
    <input type="text" id="txt1" value="xxxxx" />
    <input type="text" id="txt2" value="yyyyy" />
   <script language="javascript" type="text/javascript">
   <!--
       function GetHttpRequest() {
           var xmlhttp_request = false;
           try {
               if (window.ActiveXObject) {
                   for (var i = 5; i; i--) {
                       try {
                           if (i == 2) {
                               xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
                           }
                           else {
                               xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP." + i + ".0");
                           }
                           break;
                       }
                       catch (e) {
                           xmlhttp_request = false;
                       }
                   }
               }
               else if (window.XMLHttpRequest) {
                   xmlhttp_request = new XMLHttpRequest();
                   if (xmlhttp_request.overrideMimeType) {
                       xmlhttp_request.overrideMimeType("text/xml");
                   }
               }
           }
           catch (e) {
               xmlhttp_request = false;
           }
           return xmlhttp_request;
       }
       function AjaxPage(sld, url) {
           var oXmlHttp = GetHttpRequest();
           if (oXmlHttp) {
               oXmlHttp.OnReadyStateChange = function() {
                   if (oXmlHttp.readyState == 4) {
                       if (oXmlHttp.status == 200 || oXmlHttpRequest == 304) {
                           IncludeJS(sld, url, oXmlHttp.responseText);
                       }
                       else {
                           alert("XML request error:" + oXmlHttp.statusText + "(" + oXmlHttp.status + ")");
                       }
                   }
               };
               oXmlHttp.open("GET", url, true);
               oXmlHttp.setRequestHeader("Content-Type", "text/xml");
               oXmlHttp.setRequestHeader("Content-Type", "gb2312");
               oXmlHttp.send(null);
           }
       }
       function IncludeJS(sld, fileUrl, source) {
           if ((source != null) && (!document.getElementById(sld))) {
               var oHead = document.getElementsByTagName("HEAD").item(0);
               var oScript = document.createElement('script');

               oScript.language = "javascript";
               oScript.type = "text/javascript";
               oScript.id = sld;
               oScript.defer = true;
               oScript.text = source;

               oHead.appendChild(oScript);
           }
       }

       AjaxPage("scrA", "JS/b.js");
       alert("首頁面動態載入JS指令碼");
       alert("首頁面動態載入b.js並取其中的變數：" + str);
   //-->
    </script>
</body>
</html>

附：其它的三種方法

動態載入js檔案的方法（缺陷：不能使用js中的全域變數，如果是在html>body之後的代碼中動態載入的話，可能還有其它的缺陷）：

1.直接document.write
<script language="javascript"> document.write("<script src='test.js'><\/script");
</script>

2.動態改變已經存在的script的src
<script src='' id='s1'></script>
<script language="javascript">
s1.src='test.js';
</script>

3.動態建立script元素
<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'test.js';
oHead.appendChild(oScript);
</script>

此上三種方法都是非同步執行的，無法保證載入後指令碼具體執行的情況，因為IE無法被我們的指令碼所阻塞，無法要求載入過程中斷，等待我們取得必要的資訊。在載入指令碼時，首頁面的指令碼在繼續運行，如果用以上的方法，那如下代碼：

要動態載入的JS指令碼：a.js,以下是該檔案內容：
var str = "中國";
alert("這是a.js中的變數："+str);

對話方塊將不能彈出，報錯：'str'未定義

本文章原先以中文撰寫並發佈於 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