動態加載js文件

在不同的情況下，需要對Javascript文件進行加載，尤其是對同一個文件在不同瀏覽器中運行時所需要做的處理，例如IE9、Firefox等，對Javascript文件的加載需要做不同的處理，此處將網上搜來的一些加載方式進行借鑑：

1）直接document.write

<span style="font-size:18px;"><script language="javascript">
    document.write("<script src='test.js'><//script>"); 
</script></span>

2）動態改變已有script的src屬性

<span style="font-size:18px;"><script src='' id="s1"></script> 

<script language="javascript"> 

    s1.src="test.js" 

</script></span>

3）動態創建script元素

<span style="font-size:18px;"><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></span>

上述三種方式的加載方式是異步執行的，即在加載這些腳本的同時，主頁面的腳本繼續運行，如果用以下的方式進行加載js腳本，則達不到預期的效果：

其中要動態加載的js腳本：a.js，以下是該文件的源代碼：

<span style="font-size:18px;">var  str="中國";

alert("這是a.js中的變量："+ str);</span>

主頁面中加載該js文件的代碼如下：

<span style="font-size:18px;"><script language="JavaScript">
	function LoadJS(id, fileUrl)
	{
		var scriptTag=document.getElementById(id);
		var oHead=document.getElementByTagBame('HEAD').item(0);
		var oScript=document.createElement("script");
		
		if(scriptTag)
		{
			oHead.removeChild(scriptTag);
		}
		
		oScript.id=id;
		oScript.type="text/javascript";
		oScript.src=fileUrl;
		oHead.appendChild(oScript);
	}
	
	LoadJS("a.js");
	alert("主頁面動態加載a.js並獲取其中的變量"+ str);

</script></span>

理論中上述代碼執行後a.js的alert執行並彈出消息，但主頁面產生了錯誤，並沒有彈出對話框，原因是"str"未定義。因爲主頁面在提取str的時候a.js並沒有完全加載成功，而直接執行之後的代碼。遇到需要同步執行的腳本的時候，可以用下面的第四種方式：

4）利用XMLHTTP取得要執行的腳本的內容，在創建script對象。

注意所要加載的Javascript文件的編碼保存格式必須是UTF8，不然會出錯，因爲服務器與XML使用UTF8編碼傳送數據。同步執行的加載方式主要代碼如下：

<span style="font-size:18px;"><script language="JavaScript">
	function GetHttpRequest()
	{
		if(window.XMLHttpRequest)
		{
			return new XMLHttpRequest();
		}
		else if(window.ActiveXObject)
		{
			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.getElementById(sId)))
		{
			var oHead=document.getElementByTagBame('HEAD').item(0);
			var oScript=document.createElement("script");
			
			oScript.language="javascript";
			oScript.type="text/javascript";
			oScript.id=sId;
			oScript.defer=true;
			oScript.text=source;
			oHead.appendChild(oScript);
		}
	}
	AjaxPage("srcA","b.js");
	alert("主頁面動態加載JS腳本。");
	alert("主頁面動態加載a.js並獲取其中的變量:"+str);
</script></span>

用Ajax同步加載JS代碼，加載一個還好，兩個或更多的時候效率比較低，還是用異步加載比較快。