A-A+

javascript动态加载JS文件（支持各种浏览器）

2016年01月14日前端设计评论 1 条阅读 6 views 次

文章收藏了各种各样的关于动态加载JS的方法，包括利用 jquery,异步ajax,常用的js方法等等参考。

1、直接document.write

2、动态改变已有script的src属性

3、动态创建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文件部分代码:

然后是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文件的部分代码:

利用异步加载方法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>

夏日博客