javascript動態載入JS檔案（支援各種瀏覽器）

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>

這三種方法都是非同步執行的，也就是說，在載入這些指令碼的同時，首頁面的指令碼繼續運行，如果用以上的方法，那下面的代碼將得不到預期的效果。
要動態載入的JS指令碼：a.js，以下是該檔案的內容。

代碼如下	複製代碼
var str = "中國"; alert( "這是a.js中的變數：" + str );

下面看參考執行個體

代碼如下

複製代碼

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

因為使用者點擊後，載入js，但是如果js已經存在則不必載入了，直接調用回呼函數即可。所以在這裡我沒有移除script標籤。簡單測試了一下，貌似不會引發記憶體泄露。

利用 現在流行的jquery

jquery的 append 這個方法，然後就把代碼改成了

代碼如下	複製代碼
$(document).append("<script type='text/javascript' src='"+_webInfPath+"/js/util.js'</script>");

OK

下面我來詳細介紹一下

首先HTML檔案部分代碼： 
    

代碼如下	複製代碼
<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>        <script type="text/javascript" src="./js/common.js"></script>      <select id="ts1" jselect="ts1"></select><!-- 下拉框使用 -->

然後是common.js部分代碼：

代碼如下	複製代碼
var _webInfPath = "" ;  //工程上下文web-inf路徑

//初始頁面

代碼如下	複製代碼
$(document).ready(function(){ _webInfPath = getWebRootPath(); //擷取工程上下文路徑 $(document).append("<script type='text/javascript' src='"+_webInfPath+"/js/util.js'</script>"); JSelect(); //下拉框填值 } );

//擷取項目跟路徑

代碼如下	複製代碼
function getWebRootPath(){ var path = location.href ; var pathArr = path.split("/"); return pathArr[0]+"//"+pathArr[2]+"/"+pathArr[3] ; }

//下拉框填值

代碼如下

複製代碼

function JSelect(){ $.each($("select"),function(){ var jqueryObj = $(this) ; var jselect = $(this).attr("jselect") ; $.ajax({ url: _webInfPath+"/servlet/ajaxServlet.do" ,   //(這裡的ajaxServlet其實是我寫的一個公用的servlet，效果和struts一樣，通過配置後，會自動執行action裡面的方法) data:{"method":"getJselect","act":"glob","jselect":jselect }, type: "post" , async : "true" , dataType : "json", success : function(result){ fillSelect(result,jqueryObj.attr("id")); } }); }); }

然後是util.js檔案的部分代碼：

代碼如下

複製代碼

//-------------------------------------下拉框begin--------------------- /** *填充下拉框供調用 *   jsonArr : 存放JselectVo對象的JOSN數組 *   selectId : selectID */ function fillSelect(jsonArr,selectId){ if(jsonArr==null || jsonArr.length==0){ return false ; } var content = "" ; $.each(jsonArr,function(){ content += jselect_addOption(this); }); $("#"+selectId).append(content); } //拼裝option function jselect_addOption(_option){ var arr = new Array() ; arr.push("<option value='" + _option.value+"'>"); arr.push(_option.name); arr.push("</option>"); return arr.join(""); }

//-------------------------------------下拉框end---------------------

利用非同步載入方法ajax

原理：用XMLHTTP取得要指令碼的內容，再建立 Script 對象。
注意：a.js必須用UTF8編碼儲存，要不會出錯。因為伺服器與XML使用UTF8編碼傳送資料。這裡還有一種方法，在WEB Server上設定預設編碼，如果JS儲存為GB2312 就在伺服器設定預設的檔案編碼為GB2312，這樣就不會出錯了。
首頁面代碼：

代碼如下

複製代碼

<script language="JavaScript"> function GetHttpRequest() { if ( window.XMLHttpRequest ) // Gecko return new XMLHttpRequest() ; else if ( window.ActiveXObject ) // IE return new ActiveXObject("MsXml2.XmlHttp") ; } function AjaxPage(sId, url){ var oXmlHttp = GetHttpRequest() ; oXmlHttp.OnReadyStateChange = function() { if ( oXmlHttp.readyState == 4 ) { if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ) { IncludeJS( sId, url, oXmlHttp.responseText ); } else { alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ; } } } oXmlHttp.open('GET', url, true); oXmlHttp.send(null); } function IncludeJS(sId, fileUrl, source) { if ( ( source != null ) && ( !document.getElementByIdx_x( sId ) ) ){ var oHead = document.getElementsByTagName_r('HEAD').item(0); var oScript = document.createElement_x( "script" ); oScript.language = "javascript"; oScript.type = "text/javascript"; oScript.id = sId; oScript.defer = true; oScript.text = source; oHead.appendChild( oScript ); } } AjaxPage( "scrA", "b.js" ); alert( "首頁面動態載入JS指令碼。"); alert( "首頁面動態載入a.js並取其中的變數：" + str ); </script>