A-A+

javascript动态加载JS文件(支持各种浏览器)

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

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

1、直接document.write

  1. <script language="javascript">   
  2.     document.write("<script src='test.js'></script>");   
  3. </script>  

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

  1. <script src='' id="s1"></script>   
  2. <script language="javascript">   
  3.     s1.src="test.js"   
  4. </script>  

3、动态创建script元素

  1. <script>   
  2.     var oHead = document.getElementsByTagName('HEAD').item(0);   
  3.     var oScript= document.createElement("script");   
  4.     oScript.type = "text/javascript";   
  5.     oScript.src="test.js";   
  6.     oHead.appendChild( oScript);   
  7. </script>  

这三种方法都是异步执行的,也就是说,在加载这些脚本的同时,主页面的脚本继续运行,如果用以上的方法,那下面的代码将得不到预期的效果。

要动态加载的JS脚本:a.js,以下是该文件的内容.

var str = "中国";

alert( "这是a.js中的变量:" + str );

下面看参考实例,代码如下:

  1. function loadJs(sid,jsurl,callback){  
  2.         var nodeHead = document.getElementsByTagName('head')[0];  
  3.         var nodeScript = null;  
  4.         //不存在加载  
  5.         if(document.getElementById(sid) == null){  
  6.                 nodeScript = document.createElement('script');  
  7.                 nodeScript.setAttribute('type', 'text/javascript');  
  8.                 nodeScript.setAttribute('src', jsurl);  
  9.                 nodeScript.setAttribute('id',sid);  
  10.                 if (callback != null) {  
  11.                         nodeScript.onload = nodeScript.onreadystatechange = function(){  
  12.                                 if (nodeScript.ready) {  
  13.                                         return false;  
  14.                                 }  
  15.                                 if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') {  
  16.                                         nodeScript.ready = true;  
  17.                                         callback();  
  18.                                 }  
  19.                         };  
  20.                 }         
  21.                 nodeHead.appendChild(nodeScript);  
  22.         } else {  
  23.                 if(callback != null){  
  24.                         callback();  
  25.                 }         
  26.         }         
  27. }  

因为用户点击后,加载js,但是如果js已经存在则不必加载了,直接调用回调函数即可。所以在这里我没有移除script标签。简单测试了一下,貌似不会引发内存泄露。

利用 现在流行的jquery.

jquery的 append 这个方法,然后就把代码改成了:

  1. $(document).append("<script type='text/javascript' src='"+_webInfPath+"/js/util.js'</script>");  

OK,下面我来详细介绍一下,首先HTML文件部分代码:

  1. <script type="text/javascript" src="./js/jquery-1.4.2.js"></script>   
  2.    <script type="text/javascript" src="./js/common.js"></script>  
  3.  <select id="ts1" jselect="ts1"></select><!-- 下拉框使用 -->  

然后是common.js部分代码:

  1. var _webInfPath = "" ;  //工程上下文web-inf路径  
  2. //初始页面  
  3. $(document).ready(function(){   
  4. _webInfPath = getWebRootPath(); //获取工程上下文路径   
  5. $(document).append("<script type='text/javascript' src='"+_webInfPath+"/js/util.js'</script>");   
  6. JSelect(); //下拉框填值   
  7. }   
  8. );  
  9. //获取项目跟路径  
  10. function getWebRootPath(){   
  11. var path = location.href ;   
  12. var pathArr = path.split("/");   
  13. return pathArr[0]+"//"+pathArr[2]+"/"+pathArr[3] ;   
  14. }  
  15. //下拉框填值  
  16. function JSelect(){   
  17. $.each($("select"),function(){   
  18. var jqueryObj = $(this) ;   
  19. var jselect = $(this).attr("jselect") ;   
  20. $.ajax({   
  21. url: _webInfPath+"/servlet/ajaxServlet.do" ,   //(这里的ajaxServlet其实是我写的一个公共的servlet,效果和struts一样,通过配置后,会自动执行action里面的方法)   
  22. data:{"method":"getJselect","act":"glob","jselect":jselect },   
  23. type: "post" ,   
  24. async : "true" ,   
  25. dataType : "json",   
  26. success : function(result){   
  27. fillSelect(result,jqueryObj.attr("id"));   
  28. }   
  29. });   
  30. });   
  31. }  

然后是util.js文件的部分代码:

  1. //-------------------------------------下拉框begin---------------------   
  2. /**  
  3. *填充下拉框供调用  
  4. *   jsonArr : 存放JselectVo对象的JOSN数组  
  5. *   selectId : selectID  
  6. */   
  7. function fillSelect(jsonArr,selectId){   
  8. if(jsonArr==null || jsonArr.length==0){   
  9. return false ;   
  10. }   
  11. var content = "" ;   
  12. $.each(jsonArr,function(){   
  13. content += jselect_addOption(this);   
  14. });   
  15. $("#"+selectId).append(content);   
  16. }  
  17. //拼装option   
  18. function jselect_addOption(_option){   
  19. var arr = new Array() ;   
  20. arr.push("<option value='" + _option.value+"'>");   
  21. arr.push(_option.name);   
  22. arr.push("</option>");   
  23. return arr.join("");   
  24. }  
  25. //-------------------------------------下拉框end---------------------  

利用异步加载方法ajax

原理:用XMLHTTP取得要脚本的内容,再创建 Script 对象.

注意:a.js必须用UTF8编码保存,要不会出错,因为服务器与XML使用UTF8编码传送数据,这里还有一种方法,在WEB Server上设置默认编码,如果JS保存为GB2312 就在服务器设置默认的文件编码为GB2312,这样就不会出错了.

主页面代码:

  1. <script language="JavaScript">  
  2. function GetHttpRequest()  
  3. {  
  4. if ( window.XMLHttpRequest ) // Gecko  
  5. return new XMLHttpRequest() ;  
  6. else if ( window.ActiveXObject ) // IE  
  7. return new ActiveXObject("MsXml2.XmlHttp") ;  
  8. }  
  9. function AjaxPage(sId, url){  
  10. var oXmlHttp = GetHttpRequest() ;  
  11. oXmlHttp.OnReadyStateChange = function()  
  12. {  
  13. if ( oXmlHttp.readyState == 4 )  
  14. {  
  15. if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )  
  16. {  
  17. IncludeJS( sId, url, oXmlHttp.responseText );  
  18. }  
  19. else  
  20. {  
  21. alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;  
  22. }  
  23. }  
  24. }  
  25. oXmlHttp.open('GET', url, true);  
  26. oXmlHttp.send(null);  
  27. }  
  28. function IncludeJS(sId, fileUrl, source)  
  29. {  
  30. if ( ( source != null ) && ( !document.getElementByIdx_x( sId ) ) ){  
  31. var oHead = document.getElementsByTagName_r('HEAD').item(0);  
  32. var oScript = document.createElement_x( "script" );  
  33. oScript.language = "javascript";  
  34. oScript.type = "text/javascript";  
  35. oScript.id = sId;  
  36. oScript.defer = true;  
  37. oScript.text = source;  
  38. oHead.appendChild( oScript );  
  39. }  
  40. }  
  41. AjaxPage( "scrA""b.js" );  
  42. alert( "主页面动态加载JS脚本。");  
  43. alert( "主页面动态加载a.js并取其中的变量:" + str );  
  44. </script>  
标签:

1 条留言  访客:1 条  博主:0 条

  1. 沉鱼落雁随笔

    看着眼晕

给我留言