【www.bbyears.com--浏览器】
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元素
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，以下是该文件的内容。
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 这个方法，然后就把代码改成了
OK
下面我来详细介绍一下
首先HTML文件部分代码：
<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
然后是common.js部分代码：
代码如下 var _webInfPath = "" ; //工程上下文web-inf路径
//初始页面
_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("");
return arr.join("");
}
//-------------------------------------下拉框end---------------------
利用异步加载方法ajax
原理：用XMLHTTP取得要脚本的内容，再创建 Script 对象。
注意：a.js必须用UTF8编码保存，要不会出错。因为服务器与XML使用UTF8编码传送数据。这里还有一种方法，在WEB Server上设置默认编码，如果JS保存为GB2312 就在服务器设置默认的文件编码为GB2312，这样就不会出错了。
主页面代码：
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>