动态加载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代码，加载一个还好，两个或更多的时候效率比较低，还是用异步加载比较快。